diff --git a/static/gaute/sass/screen.scss b/static/gaute/sass/screen.scss index 13f6f63..6af5171 100644 --- a/static/gaute/sass/screen.scss +++ b/static/gaute/sass/screen.scss @@ -1,5 +1,6 @@ -//@import "compass"; +@import "compass"; @import "compass_twitter_bootstrap"; +@import "compass_twitter_bootstrap_responsive"; body { diff --git a/static/gaute/stylesheets/screen.css b/static/gaute/stylesheets/screen.css index b3d555e..ee5f20e 100644 --- a/static/gaute/stylesheets/screen.css +++ b/static/gaute/stylesheets/screen.css @@ -512,7 +512,8 @@ blockquote.pull-right { border-left: 0; border-right: 5px solid #eeeeee; } -blockquote.pull-right p, blockquote.pull-right small { +blockquote.pull-right p, +blockquote.pull-right small { text-align: right; } @@ -924,20 +925,27 @@ textarea[readonly] { cursor: not-allowed; } -.control-group.warning > label, .control-group.warning .help-block, .control-group.warning .help-inline { +.control-group.warning > label, +.control-group.warning .help-block, +.control-group.warning .help-inline { color: #c09853; } -.control-group.warning input, .control-group.warning select, .control-group.warning textarea { +.control-group.warning input, +.control-group.warning select, +.control-group.warning textarea { color: #c09853; border-color: #c09853; } -.control-group.warning input:focus, .control-group.warning select:focus, .control-group.warning textarea:focus { +.control-group.warning input:focus, +.control-group.warning select:focus, +.control-group.warning textarea:focus { border-color: #a47e3c; -webkit-box-shadow: 0 0 6px #dbc59e; -moz-box-shadow: 0 0 6px #dbc59e; box-shadow: 0 0 6px #dbc59e; } -.control-group.warning .input-prepend .add-on, .control-group.warning .input-append .add-on { +.control-group.warning .input-prepend .add-on, +.control-group.warning .input-append .add-on { color: #c09853; background-color: #fcf8e3; border-color: #c09853; @@ -1054,7 +1062,8 @@ select:focus:required:invalid:focus { .input-append:after { clear: both; } -.input-prepend input, .input-prepend .uneditable-input, +.input-prepend input, +.input-prepend .uneditable-input, .input-append input, .input-append .uneditable-input { -moz-border-radius: 0 3px 3px 0; @@ -1064,7 +1073,8 @@ select:focus:required:invalid:focus { -khtml-border-radius: 0 3px 3px 0; border-radius: 0 3px 3px 0; } -.input-prepend input:focus, .input-prepend .uneditable-input:focus, +.input-prepend input:focus, +.input-prepend .uneditable-input:focus, .input-append input:focus, .input-append .uneditable-input:focus { position: relative; @@ -1108,7 +1118,8 @@ select:focus:required:invalid:focus { /* IE6-7 */ } -.input-append input, .input-append .uneditable-input { +.input-append input, +.input-append .uneditable-input { float: left; -moz-border-radius: 3px 0 0 3px; -webkit-border-radius: 3px 0 0 3px; @@ -1150,7 +1161,11 @@ select:focus:required:invalid:focus { border-radius: 14px; } -.form-search input, .form-search textarea, .form-search select, .form-search .help-inline, .form-search .uneditable-input, +.form-search input, +.form-search textarea, +.form-search select, +.form-search .help-inline, +.form-search .uneditable-input, .form-inline input, .form-inline textarea, .form-inline select, @@ -1237,7 +1252,8 @@ table { width: 100%; margin-bottom: 18px; } -.table th, .table td { +.table th, +.table td { padding: 8px; line-height: 18px; text-align: left; @@ -1250,14 +1266,16 @@ table { .table thead th { vertical-align: bottom; } -.table thead:first-child tr th, .table thead:first-child tr td { +.table thead:first-child tr th, +.table thead:first-child tr td { border-top: 0; } .table tbody + tbody { border-top: 2px solid #ddd; } -.table-condensed th, .table-condensed td { +.table-condensed th, +.table-condensed td { padding: 4px 5px; } @@ -1272,13 +1290,19 @@ table { -khtml-border-radius: 4px; border-radius: 4px; } -.table-bordered th + th, .table-bordered td + td, .table-bordered th + td, .table-bordered td + th { +.table-bordered th + th, +.table-bordered td + td, +.table-bordered th + td, +.table-bordered td + th { border-left: 1px solid #ddd; } -.table-bordered thead:first-child tr:first-child th, .table-bordered tbody:first-child tr:first-child th, .table-bordered tbody:first-child tr:first-child td { +.table-bordered thead:first-child tr:first-child th, +.table-bordered tbody:first-child tr:first-child th, +.table-bordered tbody:first-child tr:first-child td { border-top: 0; } -.table-bordered thead:first-child tr:first-child th:first-child, .table-bordered tbody:first-child tr:first-child td:first-child { +.table-bordered thead:first-child tr:first-child th:first-child, +.table-bordered tbody:first-child tr:first-child td:first-child { -moz-border-radius: 4px 0 0 0; -webkit-border-radius: 4px 0 0 0; -o-border-radius: 4px 0 0 0; @@ -1286,7 +1310,8 @@ table { -khtml-border-radius: 4px 0 0 0; border-radius: 4px 0 0 0; } -.table-bordered thead:first-child tr:first-child th:last-child, .table-bordered tbody:first-child tr:first-child td:last-child { +.table-bordered thead:first-child tr:first-child th:last-child, +.table-bordered tbody:first-child tr:first-child td:last-child { -moz-border-radius: 0 4px 0 0; -webkit-border-radius: 0 4px 0 0; -o-border-radius: 0 4px 0 0; @@ -1294,7 +1319,8 @@ table { -khtml-border-radius: 0 4px 0 0; border-radius: 0 4px 0 0; } -.table-bordered thead:last-child tr:last-child th:first-child, .table-bordered tbody:last-child tr:last-child td:first-child { +.table-bordered thead:last-child tr:last-child th:first-child, +.table-bordered tbody:last-child tr:last-child td:first-child { -moz-border-radius: 0 0 0 4px; -webkit-border-radius: 0 0 0 4px; -o-border-radius: 0 0 0 4px; @@ -1302,7 +1328,8 @@ table { -khtml-border-radius: 0 0 0 4px; border-radius: 0 0 0 4px; } -.table-bordered thead:last-child tr:last-child th:last-child, .table-bordered tbody:last-child tr:last-child td:last-child { +.table-bordered thead:last-child tr:last-child th:last-child, +.table-bordered tbody:last-child tr:last-child td:last-child { -moz-border-radius: 0 0 4px 0; -webkit-border-radius: 0 0 4px 0; -o-border-radius: 0 0 4px 0; @@ -1311,11 +1338,13 @@ table { border-radius: 0 0 4px 0; } -.table-striped tbody tr:nth-child(odd) td, .table-striped tbody tr:nth-child(odd) th { +.table-striped tbody tr:nth-child(odd) td, +.table-striped tbody tr:nth-child(odd) th { background-color: #f9f9f9; } -.table tbody tr:hover td, .table tbody tr:hover th { +.table tbody tr:hover td, +.table tbody tr:hover th { background-color: #f5f5f5; } @@ -3058,7 +3087,8 @@ input[type="submit"].btn.small { color: white; background-color: transparent; } -.navbar .btn, .navbar .btn-group { +.navbar .btn, +.navbar .btn-group { margin-top: 5px; } .navbar .btn-group .btn { @@ -3076,22 +3106,28 @@ input[type="submit"].btn.small { .navbar-form:after { clear: both; } -.navbar-form input, .navbar-form select { +.navbar-form input, +.navbar-form select { display: inline-block; margin-top: 5px; margin-bottom: 0; } -.navbar-form .radio, .navbar-form .checkbox { +.navbar-form .radio, +.navbar-form .checkbox { margin-top: 5px; } -.navbar-form input[type="image"], .navbar-form input[type="checkbox"], .navbar-form input[type="radio"] { +.navbar-form input[type="image"], +.navbar-form input[type="checkbox"], +.navbar-form input[type="radio"] { margin-top: 3px; } -.navbar-form .input-append, .navbar-form .input-prepend { +.navbar-form .input-append, +.navbar-form .input-prepend { margin-top: 6px; white-space: nowrap; } -.navbar-form .input-append input, .navbar-form .input-prepend input { +.navbar-form .input-append input, +.navbar-form .input-prepend input { margin-top: 0; } @@ -4064,13 +4100,16 @@ a.thumbnail:hover { display: block; line-height: 1; } -.carousel .active, .carousel .next, .carousel .prev { +.carousel .active, +.carousel .next, +.carousel .prev { display: block; } .carousel .active { left: 0; } -.carousel .next, .carousel .prev { +.carousel .next, +.carousel .prev { position: absolute; top: 0; width: 100%; @@ -4081,7 +4120,8 @@ a.thumbnail:hover { .carousel .prev { left: -100%; } -.carousel .next.left, .carousel .prev.right { +.carousel .next.left, +.carousel .prev.right { left: 0; } .carousel .active.left { @@ -4183,6 +4223,724 @@ a.thumbnail:hover { visibility: hidden; } +/* + * Bootstrap Responsive v2.0.1 + * + * Copyright 2012 Twitter, Inc + * Licensed under the Apache License v2.0 + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Designed and built with all the love in the world @twitter by @mdo and @fat. + */ +.hidden { + display: none; + visibility: hidden; +} + +@media (max-width: 480px) { + .nav-collapse { + -webkit-transform: translate3d(0, 0, 0); + } + + .page-header h1 small { + display: block; + line-height: 18px; + } + + input[class*="span"], + select[class*="span"], + textarea[class*="span"], + .uneditable-input { + display: block; + width: 100%; + min-height: 28px; + /* Make inputs at least the height of their button counterpart */ + /* Makes inputs behave like true block-level elements */ + -webkit-box-sizing: border-box; + /* Older Webkit */ + -moz-box-sizing: border-box; + /* Older FF */ + -ms-box-sizing: border-box; + /* IE8 */ + box-sizing: border-box; + /* CSS3 spec*/ + } + + .input-prepend input[class*="span"], + .input-append input[class*="span"] { + width: auto; + } + + input[type="checkbox"], + input[type="radio"] { + border: 1px solid #ccc; + } + + .form-horizontal .control-group > label { + float: none; + width: auto; + padding-top: 0; + text-align: left; + } + + .form-horizontal .controls { + margin-left: 0; + } + + .form-horizontal .control-list { + padding-top: 0; + } + + .form-horizontal .form-actions { + padding-left: 10px; + padding-right: 10px; + } + + .modal { + position: absolute; + top: 10px; + left: 10px; + right: 10px; + width: auto; + margin: 0; + } + .modal.fade.in { + top: auto; + } + + .modal-header .close { + padding: 10px; + margin: -10px; + } + + .carousel-caption { + position: static; + } +} +@media (max-width: 767px) { + .container { + width: auto; + padding: 0 20px; + } + + .row-fluid { + width: 100%; + } + + .row { + margin-left: 0; + } + + .row > [class*="span"], + .row-fluid > [class*="span"] { + float: none; + display: block; + width: auto; + margin: 0; + } +} +@media (min-width: 768px) and (max-width: 979px) { + .row { + margin-left: -20px; + *zoom: 1; + } + .row:before, .row:after { + display: table; + content: ""; + } + .row:after { + clear: both; + } + + [class*="span"] { + float: left; + margin-left: 20px; + } + + .span1 { + width: 42px; + } + + .span2 { + width: 104px; + } + + .span3 { + width: 166px; + } + + .span4 { + width: 228px; + } + + .span5 { + width: 290px; + } + + .span6 { + width: 352px; + } + + .span7 { + width: 414px; + } + + .span8 { + width: 476px; + } + + .span9 { + width: 538px; + } + + .span10 { + width: 600px; + } + + .span11 { + width: 662px; + } + + .span12, + .container { + width: 724px; + } + + .offset1 { + margin-left: 82px; + } + + .offset2 { + margin-left: 144px; + } + + .offset3 { + margin-left: 206px; + } + + .offset4 { + margin-left: 268px; + } + + .offset5 { + margin-left: 330px; + } + + .offset6 { + margin-left: 392px; + } + + .offset7 { + margin-left: 454px; + } + + .offset8 { + margin-left: 516px; + } + + .offset9 { + margin-left: 578px; + } + + .offset10 { + margin-left: 640px; + } + + .offset11 { + margin-left: 702px; + } + + .row-fluid { + width: 100%; + *zoom: 1; + } + .row-fluid:before, .row-fluid:after { + display: table; + content: ""; + } + .row-fluid:after { + clear: both; + } + .row-fluid > [class*="span"] { + float: left; + margin-left: 2.762%; + } + .row-fluid > [class*="span"]:first-child { + margin-left: 0; + } + .row-fluid > .span1 { + width: 5.801%; + } + .row-fluid > .span2 { + width: 14.365%; + } + .row-fluid > .span3 { + width: 22.928%; + } + .row-fluid > .span4 { + width: 31.492%; + } + .row-fluid > .span5 { + width: 40.055%; + } + .row-fluid > .span6 { + width: 48.619%; + } + .row-fluid > .span7 { + width: 57.182%; + } + .row-fluid > .span8 { + width: 65.746%; + } + .row-fluid > .span9 { + width: 74.309%; + } + .row-fluid > .span10 { + width: 82.873%; + } + .row-fluid > .span11 { + width: 91.436%; + } + .row-fluid > .span12 { + width: 100.0%; + } + + input.span1, + textarea.span1, + .uneditable-input.span1 { + width: 32px; + } + input.span2, + textarea.span2, + .uneditable-input.span2 { + width: 94px; + } + input.span3, + textarea.span3, + .uneditable-input.span3 { + width: 156px; + } + input.span4, + textarea.span4, + .uneditable-input.span4 { + width: 218px; + } + input.span5, + textarea.span5, + .uneditable-input.span5 { + width: 280px; + } + input.span6, + textarea.span6, + .uneditable-input.span6 { + width: 342px; + } + input.span7, + textarea.span7, + .uneditable-input.span7 { + width: 404px; + } + input.span8, + textarea.span8, + .uneditable-input.span8 { + width: 466px; + } + input.span9, + textarea.span9, + .uneditable-input.span9 { + width: 528px; + } + input.span10, + textarea.span10, + .uneditable-input.span10 { + width: 590px; + } + input.span11, + textarea.span11, + .uneditable-input.span11 { + width: 652px; + } + input.span12, + textarea.span12, + .uneditable-input.span12 { + width: 714px; + } +} +@media (max-width: 979px) { + body { + padding-top: 0; + } + + .navbar-fixed-top { + position: static; + margin-bottom: 18px; + } + + .navbar-fixed-top .navbar-inner { + padding: 5px; + } + + .navbar .container { + width: auto; + padding: 0; + } + + .navbar .brand { + padding-left: 10px; + padding-right: 10px; + margin: 0 0 0 -5px; + } + + .navbar .nav-collapse { + clear: left; + } + + .navbar .nav { + float: none; + margin: 0 0 9px; + } + + .navbar .nav > li { + float: none; + } + + .navbar .nav > li > a { + margin-bottom: 2px; + } + + .navbar .nav > .divider-vertical { + display: none; + } + + .navbar .nav .nav-header { + color: #999999; + text-shadow: none; + } + + .navbar .nav > li > a, + .navbar .dropdown-menu a { + padding: 6px 15px; + font-weight: bold; + color: #999999; + -moz-border-radius: 3px; + -webkit-border-radius: 3px; + -o-border-radius: 3px; + -ms-border-radius: 3px; + -khtml-border-radius: 3px; + border-radius: 3px; + } + + .navbar .dropdown-menu li + li a { + margin-bottom: 2px; + } + + .navbar .nav > li > a:hover, + .navbar .dropdown-menu a:hover { + background-color: #222222; + } + + .navbar .dropdown-menu { + position: static; + top: auto; + left: auto; + float: none; + display: block; + max-width: none; + margin: 0 15px; + padding: 0; + background-color: transparent; + border: none; + -moz-border-radius: 0; + -webkit-border-radius: 0; + -o-border-radius: 0; + -ms-border-radius: 0; + -khtml-border-radius: 0; + border-radius: 0; + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; + } + + .navbar .dropdown-menu:before, + .navbar .dropdown-menu:after { + display: none; + } + + .navbar .dropdown-menu .divider { + display: none; + } + + .navbar-form, + .navbar-search { + float: none; + padding: 9px 15px; + margin: 9px 0; + border-top: 1px solid #222222; + border-bottom: 1px solid #222222; + -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1); + -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1); + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1); + } + + .navbar .nav.pull-right { + float: none; + margin-left: 0; + } + + .navbar-static .navbar-inner { + padding-left: 10px; + padding-right: 10px; + } + + .btn-navbar { + display: block; + } + + .nav-collapse { + overflow: hidden; + height: 0; + } +} +@media (min-width: 980px) { + .nav-collapse.collapse { + height: auto !important; + } +} +@media (min-width: 1200px) { + .row { + margin-left: -30px; + *zoom: 1; + } + .row:before, .row:after { + display: table; + content: ""; + } + .row:after { + clear: both; + } + + [class*="span"] { + float: left; + margin-left: 30px; + } + + .span1 { + width: 70px; + } + + .span2 { + width: 170px; + } + + .span3 { + width: 270px; + } + + .span4 { + width: 370px; + } + + .span5 { + width: 470px; + } + + .span6 { + width: 570px; + } + + .span7 { + width: 670px; + } + + .span8 { + width: 770px; + } + + .span9 { + width: 870px; + } + + .span10 { + width: 970px; + } + + .span11 { + width: 1070px; + } + + .span12, + .container { + width: 1170px; + } + + .offset1 { + margin-left: 130px; + } + + .offset2 { + margin-left: 230px; + } + + .offset3 { + margin-left: 330px; + } + + .offset4 { + margin-left: 430px; + } + + .offset5 { + margin-left: 530px; + } + + .offset6 { + margin-left: 630px; + } + + .offset7 { + margin-left: 730px; + } + + .offset8 { + margin-left: 830px; + } + + .offset9 { + margin-left: 930px; + } + + .offset10 { + margin-left: 1030px; + } + + .offset11 { + margin-left: 1130px; + } + + .row-fluid { + width: 100%; + *zoom: 1; + } + .row-fluid:before, .row-fluid:after { + display: table; + content: ""; + } + .row-fluid:after { + clear: both; + } + .row-fluid > [class*="span"] { + float: left; + margin-left: 2.564%; + } + .row-fluid > [class*="span"]:first-child { + margin-left: 0; + } + .row-fluid > .span1 { + width: 5.983%; + } + .row-fluid > .span2 { + width: 14.53%; + } + .row-fluid > .span3 { + width: 23.077%; + } + .row-fluid > .span4 { + width: 31.624%; + } + .row-fluid > .span5 { + width: 40.171%; + } + .row-fluid > .span6 { + width: 48.718%; + } + .row-fluid > .span7 { + width: 57.265%; + } + .row-fluid > .span8 { + width: 65.812%; + } + .row-fluid > .span9 { + width: 74.359%; + } + .row-fluid > .span10 { + width: 82.906%; + } + .row-fluid > .span11 { + width: 91.453%; + } + .row-fluid > .span12 { + width: 100%; + } + + input.span1, + textarea.span1, + .uneditable-input.span1 { + width: 60px; + } + input.span2, + textarea.span2, + .uneditable-input.span2 { + width: 160px; + } + input.span3, + textarea.span3, + .uneditable-input.span3 { + width: 260px; + } + input.span4, + textarea.span4, + .uneditable-input.span4 { + width: 360px; + } + input.span5, + textarea.span5, + .uneditable-input.span5 { + width: 460px; + } + input.span6, + textarea.span6, + .uneditable-input.span6 { + width: 560px; + } + input.span7, + textarea.span7, + .uneditable-input.span7 { + width: 660px; + } + input.span8, + textarea.span8, + .uneditable-input.span8 { + width: 760px; + } + input.span9, + textarea.span9, + .uneditable-input.span9 { + width: 860px; + } + input.span10, + textarea.span10, + .uneditable-input.span10 { + width: 960px; + } + input.span11, + textarea.span11, + .uneditable-input.span11 { + width: 1060px; + } + input.span12, + textarea.span12, + .uneditable-input.span12 { + width: 1160px; + } + + .thumbnails { + margin-left: -30px; + } + + .thumbnails > li { + margin-left: 30px; + } +} body #customer ul { margin: 0; padding: 0; diff --git a/templates/base.html b/templates/base.html index 3c0d61c..4b583e9 100644 --- a/templates/base.html +++ b/templates/base.html @@ -24,7 +24,7 @@ diff --git a/templates/deposit.html b/templates/deposit.html index 74c3e6f..9467df0 100644 --- a/templates/deposit.html +++ b/templates/deposit.html @@ -28,15 +28,14 @@ {% for user in users %}
  • {% if user.get_profile.image %} -  
    +   Profile picture
    {% else %} -  
    +   Profile picture
    {% endif %} {{ user.first_name }} {{ user.last_name|slice:":1"}}
    {{ user.get_profile.balance }}
  • - {% endfor %} diff --git a/templates/register.html b/templates/register.html index d594b52..007fbe3 100644 --- a/templates/register.html +++ b/templates/register.html @@ -35,15 +35,14 @@ {% for user in users %}
  • {% if user.get_profile.image %} -  
    +   Profile picture
    {% else %} -  
    +   Profile picture
    {% endif %} {{ user.first_name }} {{ user.last_name|slice:":1"}}
    {{ user.get_profile.balance }}
  • - {% endfor %}