Add some styling; Use inputs for field values and labels
This commit is contained in:
Martin Kleinschrodt
parent
44842e5eb2
commit
9695f82b5c
|
|
@ -1,6 +1,8 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta name="apple-mobile-web-app-capable" content="yes"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
|
||||
<script src="bower_components/requirejs/require.js"></script>
|
||||
<script src="src/config.js"></script>
|
||||
<!-- // <script src="../../polymer/polymer.js"></script> -->
|
||||
|
|
@ -8,6 +10,7 @@
|
|||
<link rel="import" href="src/components/app.html">
|
||||
<link rel="import" href="src/components/record-item.html">
|
||||
<link rel="import" href="src/components/record-view.html">
|
||||
<link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,700' rel='stylesheet' type='text/css'>
|
||||
<style>
|
||||
body {
|
||||
padding: 0;
|
||||
|
|
@ -16,7 +19,6 @@
|
|||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- 3. Declare the component by its tag. -->
|
||||
<safe-app></safe-app>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -2,13 +2,22 @@
|
|||
<template>
|
||||
<style>
|
||||
:host {
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
font-family: Lato, "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
margin: auto;
|
||||
font-weight: 300;
|
||||
font-size: 18px;
|
||||
color: #333;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
|
||||
}
|
||||
|
||||
.view {
|
||||
|
|
@ -18,10 +27,56 @@
|
|||
top: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
overflow: scroll;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.list-header {
|
||||
padding: 8px;
|
||||
background: rgb(245, 245, 245);
|
||||
display: -webkit-box;
|
||||
-webkit-box-align: center;
|
||||
}
|
||||
|
||||
.list-header > input {
|
||||
border: none;
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
font-weight: inherit;
|
||||
-webkit-appearance: none;
|
||||
padding: 6px;
|
||||
display: block;
|
||||
-webkit-box-flex: 1;
|
||||
background: white;
|
||||
border-radius: 2px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.list-header > button {
|
||||
display: block;
|
||||
border: none;
|
||||
background: transparent;
|
||||
font-size: 30px;
|
||||
font-family: inherit;
|
||||
font-weight: 100;
|
||||
line-height: 15px;
|
||||
color: #000;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
::-webkit-search-cancel-button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
*:focus {
|
||||
outline: none;
|
||||
}
|
||||
</style>
|
||||
<div class="view" id="list">
|
||||
<input value="{{ filterString }}" placeholder="type to filter..."></input>
|
||||
<div class="view" id="list" on-scroll="{{ scroll }}" on-touchmove="{{ drag }}">
|
||||
<div id="listHeader" class="list-header">
|
||||
<input value="{{ filterString }}" type="search" placeholder="type to filter..." />
|
||||
<button>+</button>
|
||||
</div>
|
||||
<template repeat="{{ record, i in filteredRecords}}">
|
||||
<safe-record-item record="{{ record }}" on-click="{{ recordClicked }}" index="{{ i }}"></safe-record-item>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -3,15 +3,19 @@
|
|||
<style>
|
||||
:host {
|
||||
display: block;
|
||||
padding: 10px;
|
||||
padding: 13.5px 15px;
|
||||
}
|
||||
|
||||
:host:not(:last-child) {
|
||||
border-bottom: solid 1px;
|
||||
border-bottom: solid 1px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
:host:active:hover {
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
:host:hover {
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
:host:active:hover:not(.disabled) {
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
</style>
|
||||
{{record.name}}
|
||||
|
|
|
|||
|
|
@ -2,37 +2,80 @@
|
|||
<template>
|
||||
<style>
|
||||
.header {
|
||||
padding: 10px;
|
||||
font-weight: bold;
|
||||
border-bottom: solid 2px;
|
||||
padding: 8px;
|
||||
background: rgb(245, 245, 245);
|
||||
display: -webkit-box;
|
||||
}
|
||||
|
||||
.header > input {
|
||||
border: none;
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
font-weight: inherit;
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
padding: 6px;
|
||||
display: block;
|
||||
-webkit-box-flex: 1;
|
||||
-webkit-box-align: center;
|
||||
background-color: transparent;
|
||||
/*background: white;*/
|
||||
/*border-radius: 2px;*/
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.header > button {
|
||||
display: block;
|
||||
border: none;
|
||||
background: transparent;
|
||||
font-size: 30px;
|
||||
font-family: inherit;
|
||||
font-weight: 100;
|
||||
line-height: 0;
|
||||
color: #000;
|
||||
margin-top: -1px;
|
||||
}
|
||||
|
||||
.field {
|
||||
/*padding: 10px;*/
|
||||
display: -webkit-box;
|
||||
}
|
||||
|
||||
.field:not(:last-child) {
|
||||
border-bottom: solid 1px;
|
||||
border-bottom: solid 1px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 12px;
|
||||
color: #bbb;
|
||||
padding: 5px 10px;
|
||||
.field > input {
|
||||
border: none;
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
font-weight: inherit;
|
||||
-webkit-appearance: none;
|
||||
padding: 13.5px 15px;
|
||||
display: block;
|
||||
background-color: transparent;
|
||||
text-overflow: ellipsis;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.value {
|
||||
padding: 0 10px 10px 10px;
|
||||
.field > input.label {
|
||||
width: 100px;
|
||||
text-align: right;
|
||||
color: rgb(175, 175, 175);
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.field > input.value {
|
||||
-webkit-box-flex: 1;
|
||||
}
|
||||
</style>
|
||||
<div class="header">
|
||||
<button on-click="{{ back }}">back</button>
|
||||
{{ record.name }}
|
||||
<button on-click="{{ back }}"><</button>
|
||||
<input value="{{ record.name }}" />
|
||||
</div>
|
||||
<template repeat="{{ field, i in record.fields }}">
|
||||
<div class="field">
|
||||
<div class="label">{{ field.name }}</div>
|
||||
<div class="value">{{ field.value }}</div>
|
||||
<input class="value" value="{{ field.value }}" placeholder="content" />
|
||||
<input class="label" value="{{ field.name }}" placeholder="label" />
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
|
|
|
|||
Loading…
Reference in New Issue