From e0a313e36b276480324bdce32c853b55fb20bd51 Mon Sep 17 00:00:00 2001 From: Kyle Fiedler Date: Tue, 8 May 2012 14:12:59 -0400 Subject: [PATCH] added more layout to amplifier --- static/css/application.css | 109 +++++++++++++--------- templates/sass/courseware/_amplifier.scss | 69 ++++++++------ 2 files changed, 108 insertions(+), 70 deletions(-) diff --git a/static/css/application.css b/static/css/application.css index 4e4b3cb832..38984a85ba 100644 --- a/static/css/application.css +++ b/static/css/application.css @@ -117,7 +117,7 @@ input, select { font-weight: 800; font-style: italic; } -.clearfix:after, .topbar:after, nav.sequence-nav:after, div.book-wrapper section.book nav:after, div.wiki-wrapper section.wiki-body header:after, html body section.main-content:after, html body section.outside-app:after, div.header-wrapper header:after, div.header-wrapper header hgroup:after, div.header-wrapper header nav ul:after, footer:after, li.calc-main div#calculator_wrapper form:after, li.calc-main div#calculator_wrapper form div.input-wrapper:after, div.leanModal_box#enroll ol:after, div.course-wrapper section.course-content .problem-set:after, div.course-wrapper section.course-content section.problems-wrapper:after, div.course-wrapper section.course-content div#seq_content:after, div.course-wrapper section.course-content ol.vert-mod > li:after, section.course-content div.video-subtitles div.video-wrapper section.video-controls:after, section.course-content div.video-subtitles div.video-wrapper section.video-controls div#slider:after, section.course-content nav.sequence-bottom ul:after, section.tool-wrapper:after, section.tool-wrapper div#controlls-container:after, section.tool-wrapper div#controlls-container div.graph-controls div.music-wrapper:after, section.tool-wrapper div#controlls-container div.schematic-sliders div.top-sliders:after, div.book-wrapper section.book nav ul:after, div.info-wrapper section.updates > ol > li:after, div.info-wrapper section.handouts ol li:after, div.profile-wrapper section.course-info header:after, div.profile-wrapper section.course-info > ol > li:after, div#wiki_panel div#wiki_create_form:after, div.wiki-wrapper section.wiki-body:after, ul.badge-list li.badge:after { +.clearfix:after, .topbar:after, nav.sequence-nav:after, div.book-wrapper section.book nav:after, div.wiki-wrapper section.wiki-body header:after, html body section.main-content:after, html body section.outside-app:after, div.header-wrapper header:after, div.header-wrapper header hgroup:after, div.header-wrapper header nav ul:after, footer:after, li.calc-main div#calculator_wrapper form:after, li.calc-main div#calculator_wrapper form div.input-wrapper:after, div.leanModal_box#enroll ol:after, div.course-wrapper section.course-content .problem-set:after, div.course-wrapper section.course-content section.problems-wrapper:after, div.course-wrapper section.course-content div#seq_content:after, div.course-wrapper section.course-content ol.vert-mod > li:after, section.course-content div.video-subtitles div.video-wrapper section.video-controls:after, section.course-content div.video-subtitles div.video-wrapper section.video-controls div#slider:after, section.course-content nav.sequence-bottom ul:after, section.tool-wrapper:after, section.tool-wrapper div#controlls-container:after, section.tool-wrapper div#controlls-container div.graph-controls div.music-wrapper:after, section.tool-wrapper div#controlls-container div.graph-controls div.inputs-wrapper:after, section.tool-wrapper div#controlls-container div.schematic-sliders div.top-sliders:after, div.book-wrapper section.book nav ul:after, div.info-wrapper section.updates > ol > li:after, div.info-wrapper section.handouts ol li:after, div.profile-wrapper section.course-info header:after, div.profile-wrapper section.course-info > ol > li:after, div#wiki_panel div#wiki_create_form:after, div.wiki-wrapper section.wiki-body:after, ul.badge-list li.badge:after { content: "."; display: block; height: 0; @@ -3943,8 +3943,8 @@ section.tool-wrapper div#controlls-container div.graph-controls div.music-wrappe padding: 6px 18px 7px; text-shadow: 0 1px 0 #31505a; -webkit-background-clip: padding-box; - font: bold 14px "Open Sans", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif; - float: left; } + font: bold 16px "Open Sans", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif; + float: right; } section.tool-wrapper div#controlls-container div.graph-controls div.music-wrapper input#playButton:hover { -webkit-box-shadow: inset 0 1px 0 0 #778589; -moz-box-shadow: inset 0 1px 0 0 #778589; @@ -4014,54 +4014,57 @@ section.tool-wrapper div#controlls-container div.graph-controls div.music-wrappe box-shadow: none; } section.tool-wrapper div#controlls-container div.graph-controls div.inputs-wrapper { zoom: 1; - margin-bottom: 22.652px; } + margin-bottom: 22.652px; + padding: 0 0 22.652px; + margin-bottom: 22.652px; + border-bottom: 1px solid #021014; + -webkit-box-shadow: 0 1px 0 #083e4b; + -moz-box-shadow: 0 1px 0 #083e4b; + box-shadow: 0 1px 0 #083e4b; } section.tool-wrapper div#controlls-container div.graph-controls div.inputs-wrapper:before, section.tool-wrapper div#controlls-container div.graph-controls div.inputs-wrapper:after { content: ""; display: table; } section.tool-wrapper div#controlls-container div.graph-controls div.inputs-wrapper:after { clear: both; } -section.tool-wrapper div#controlls-container div.graph-controls div.inputs-wrapper select#musicTypeSelect { - display: block; - font: 16px "Open Sans", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif; - float: right; +section.tool-wrapper div#controlls-container div.graph-controls p { + display: -moz-inline-box; + -moz-box-orient: vertical; + display: inline-block; + vertical-align: baseline; + zoom: 1; + *display: inline; + *vertical-align: auto; + margin: 0; + -webkit-font-smoothing: antialiased; + font-weight: bold; + text-shadow: 0 -1px 0 #021014; } +section.tool-wrapper div#controlls-container div.graph-controls ul { + display: -moz-inline-box; + -moz-box-orient: vertical; + display: inline-block; + vertical-align: baseline; + zoom: 1; + *display: inline; + *vertical-align: auto; margin-bottom: 0; } -section.tool-wrapper div#controlls-container div.graph-controls div#graph-output, section.tool-wrapper div#controlls-container div.graph-controls div#graph-listen { +section.tool-wrapper div#controlls-container div.graph-controls ul li { + display: -moz-inline-box; + -moz-box-orient: vertical; + display: inline-block; + vertical-align: baseline; + zoom: 1; + *display: inline; + *vertical-align: auto; + margin-bottom: 0; } +section.tool-wrapper div#controlls-container div.graph-controls ul li input { + margin-right: 5px; } +section.tool-wrapper div#controlls-container div.graph-controls div#graph-listen { + margin-top: 8px; + margin-right: 20px; display: block; text-align: right; float: left; margin-bottom: 0; } -section.tool-wrapper div#controlls-container div.graph-controls div#graph-output p, section.tool-wrapper div#controlls-container div.graph-controls div#graph-listen p { - display: -moz-inline-box; - -moz-box-orient: vertical; - display: inline-block; - vertical-align: baseline; - zoom: 1; - *display: inline; - *vertical-align: auto; - margin: 0; } -section.tool-wrapper div#controlls-container div.graph-controls div#graph-output ul, section.tool-wrapper div#controlls-container div.graph-controls div#graph-listen ul { - display: -moz-inline-box; - -moz-box-orient: vertical; - display: inline-block; - vertical-align: baseline; - zoom: 1; - *display: inline; - *vertical-align: auto; - margin-bottom: 0; } -section.tool-wrapper div#controlls-container div.graph-controls div#graph-output ul li, section.tool-wrapper div#controlls-container div.graph-controls div#graph-listen ul li { - display: -moz-inline-box; - -moz-box-orient: vertical; - display: inline-block; - vertical-align: baseline; - zoom: 1; - *display: inline; - *vertical-align: auto; - margin-bottom: 0; } -section.tool-wrapper div#controlls-container div.graph-controls div#graph-output ul li input, section.tool-wrapper div#controlls-container div.graph-controls div#graph-listen ul li input { - margin-right: 5px; } -section.tool-wrapper div#controlls-container div.graph-controls div#graph-listen { - margin-top: 8px; - margin-right: 20px; } section.tool-wrapper div#controlls-container label { -webkit-border-radius: 2px; -moz-border-radius: 2px; @@ -4069,8 +4072,8 @@ section.tool-wrapper div#controlls-container label { -o-border-radius: 2px; border-radius: 2px; font-weight: bold; - padding: 3px; color: #fff; + padding: 3px; -webkit-font-smoothing: antialiased; } section.tool-wrapper div#controlls-container label[for="vinCheckbox"], section.tool-wrapper div#controlls-container label[for="vinRadioButton"] { color: #409fbf; } @@ -4089,6 +4092,28 @@ section.tool-wrapper div#controlls-container div.schematic-sliders div.top-slide -webkit-box-shadow: 0 1px 0 #083e4b; -moz-box-shadow: 0 1px 0 #083e4b; box-shadow: 0 1px 0 #083e4b; } +section.tool-wrapper div#controlls-container div.schematic-sliders div.top-sliders select#musicTypeSelect { + display: -moz-inline-box; + -moz-box-orient: vertical; + display: inline-block; + vertical-align: baseline; + zoom: 1; + *display: inline; + *vertical-align: auto; + font: 16px "Open Sans", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif; + margin-bottom: 0; } +section.tool-wrapper div#controlls-container div.schematic-sliders div.top-sliders p { + display: -moz-inline-box; + -moz-box-orient: vertical; + display: inline-block; + vertical-align: baseline; + zoom: 1; + *display: inline; + *vertical-align: auto; + -webkit-font-smoothing: antialiased; + text-shadow: 0 -1px 0 #021014; + margin: 0 11.326px 22.652px 0; + font-weight: bold; } section.tool-wrapper div#controlls-container div.schematic-sliders div.slider-label { margin-bottom: 11.326px; font-weight: bold; diff --git a/templates/sass/courseware/_amplifier.scss b/templates/sass/courseware/_amplifier.scss index 69d87420d2..da1c154115 100644 --- a/templates/sass/courseware/_amplifier.scss +++ b/templates/sass/courseware/_amplifier.scss @@ -95,8 +95,8 @@ section.tool-wrapper { input#playButton { display: block; @include button(simple, lighten( #586e75, 5% )); - font: bold 14px $body-font-family; - float: left; + font: bold 16px $body-font-family; + float: right; &:active { @include box-shadow(none); @@ -116,37 +116,31 @@ section.tool-wrapper { div.inputs-wrapper { @include clearfix; margin-bottom: lh(); - - select#musicTypeSelect { - display: block; - font: 16px $body-font-family; - float: right; - margin-bottom: 0; - } + padding: 0 0 lh(); + margin-bottom: lh(); + border-bottom: 1px solid darken(#073642, 10%); + @include box-shadow(0 1px 0 lighten(#073642, 2%)); + @extend .clearfix; } - div#graph-output, div#graph-listen { - display: block; - text-align: right; - float: left; + p { + @include inline-block(); + margin: 0; + -webkit-font-smoothing: antialiased; + font-weight: bold; + text-shadow: 0 -1px 0 darken(#073642, 10%); + } + + ul { + @include inline-block(); margin-bottom: 0; - p { - @include inline-block(); - margin: 0; - } - - ul { + li { @include inline-block(); margin-bottom: 0; - li { - @include inline-block(); - margin-bottom: 0; - - input { - margin-right: 5px; - } + input { + margin-right: 5px; } } } @@ -154,14 +148,18 @@ section.tool-wrapper { div#graph-listen { margin-top: 8px; margin-right: 20px; + display: block; + text-align: right; + float: left; + margin-bottom: 0; } } label { @include border-radius(2px); font-weight: bold; - padding: 3px; color: #fff; + padding: 3px; -webkit-font-smoothing: antialiased; } @@ -196,6 +194,21 @@ section.tool-wrapper { border-bottom: 1px solid darken(#073642, 10%); @include box-shadow(0 1px 0 lighten(#073642, 2%)); @extend .clearfix; + + select#musicTypeSelect { + @include inline-block(); + font: 16px $body-font-family; + margin-bottom: 0; + } + + p { + @include inline-block(); + -webkit-font-smoothing: antialiased; + text-shadow: 0 -1px 0 darken(#073642, 10%); + margin: 0 lh(.5) lh() 0; + font-weight: bold; + } + } div.slider-label { @@ -222,7 +235,7 @@ section.tool-wrapper { margin-top: -.3em; &:hover, &:active { - background-color: lighten( #586e75, 10% ); + background-color: lighten( #586e75, 10% ); } } }