Ver código fonte

Simplify form layout.

Add:
    templates/index.html
        -Simplify form layout: reduce the number of independent adjacent `div`s,
        and position `label`s above their corresponding `input` elements.

    static/sass/index.sass
        -Remove now superfluous positioning rules for the previous layout.
tags/v1.0^2
Severyn Kozak 10 anos atrás
pai
commit
c8dcfde8c8
2 arquivos alterados com 73 adições e 47 exclusões
  1. +19
    -32
      static/sass/index.sass
  2. +54
    -15
      templates/index.html

+ 19
- 32
static/sass/index.sass Ver arquivo

@@ -42,7 +42,7 @@ div#search-field
border: 1px solid $baseColor1
font-size: 1.1em
margin-bottom: 0px
padding: 3px
padding: 6px
width: 100%

div#advanced-search
@@ -52,50 +52,37 @@ div#search-field
overflow: auto

>div
@include vendor(box-sizing, border-box)

float: left
height: 100%

>#col1
background-color: red
width: 10%

>#col2
background-color: yellow
width: 15%
width: 84%

ul
list-style: none

li
margin-bottom: 0.5em

>#col3
background-color: blue
width: 75%
label
display: block
font-size: 1.1em

div
input[type="text"]
border-color: $baseColor3
font-size: 1em
padding: 2px
width: 100%

#upper-half
background-color: brown

div
>div
float: left
height: 100%

#col1
background-color: red
width: 40%

#col2
background-color: magenta
width: 20%

#col3
background-color: pink
width: 40%

#lower-half
background-color: purple

input[type="text"]
border-color: $baseColor3
font-size: 1em
width: 30%
width: 50%

&.partly-visible
height: 1%


+ 54
- 15
templates/index.html Ver arquivo

@@ -11,38 +11,77 @@

= block body
<div id="search-field" class="partly-visible">

<div id="title">
<span id="title-bit">bit</span><span id="title-angle">&laquo;</span><span id="title-shift">shift</span>
<span id="title-bit">bit</span
><span id="title-angle">&laquo;</span
><span id="title-shift">shift</span>
</div>

<form id="search-bar">
<input type="text" name="query">
<div id="advanced-search">

<!-- Tags are closed on the following line to remove whitespace between divs. -->
<div id="col1">
H
+ Add group
</div><div id="col2">
H
</div><div id="col3">
<div id="upper-half">
<div id="col1">
A
<ul>
<li>
<label for="languages">Languages</label>
<input type="text" name="languages" id="languages"><br>
</li>

<li>
<label for="authors">Authors</label>
<input type="text" name="authors" id="authors"><br>
</li>

</ul>

</div><div id="col2">
B
</div><div id="col3">
C
<ul>
<li>
<label for="date">Date last modified</label>
<input type="text" name="date-last-modifi id="date"ed">
</li>

<li>
<label for="date">Date created</label>
<input type="text" name="date-creat id="date"ed">
</li>

</ul>
</div>
</div>

<div id="lower-half">
Z
<ul>
<li>
<label for="symbols">Symbols</label>
<input type="text" name="symbols" id="symbols"><br>
</li>

<li>
<label for="functions">Functions</label>
<input type="text" name="functions" id="functions"><br>
</li>

<li>
<label for="classes">Classes</label>
<input type="text" name="classes" id="classes"><br>
</li>

<li>
<label for="variables">Variables</label>
<input type="text" name="variables" id="variables"><br>
</li>

<u/l>
</div>
</div>
<!-- Languages <input type="text" name="languages"><br> -->
<!-- Authors <input type="text" name="authors"><br> -->
<!-- Symbols <input type="text" name="symbols"><br> -->
<!-- Functions <input type="text" name="functions"><br> -->
<!-- Classes <input type="text" name="classes"><br> -->
<!-- Variables <input type="text" name="variables"><br> -->
</div>
</form>
</div>


Carregando…
Cancelar
Salvar