From 97833c449c4984e0d4cf61a031358e9bfa12554a Mon Sep 17 00:00:00 2001 From: jlukic Date: Fri, 19 Sep 2014 18:20:53 -0400 Subject: [PATCH] Fix some layout issues --- .../packages/flat/collections/form.overrides | 24 ++++++ .../packages/flat/collections/form.variables | 74 +++++++++++++++++++ server/files/javascript/semantic.js | 26 +++---- server/files/stylesheets/semantic.css | 22 ++++-- server/partials/header.html.eco | 15 +--- 5 files changed, 130 insertions(+), 31 deletions(-) create mode 100644 build/less/themes/packages/flat/collections/form.overrides create mode 100644 build/less/themes/packages/flat/collections/form.variables diff --git a/build/less/themes/packages/flat/collections/form.overrides b/build/less/themes/packages/flat/collections/form.overrides new file mode 100644 index 000000000..e9480415b --- /dev/null +++ b/build/less/themes/packages/flat/collections/form.overrides @@ -0,0 +1,24 @@ +/******************************* + Overrides +*******************************/ + +.ui.form input[type="text"], +.ui.form input[type="email"], +.ui.form input[type="date"], +.ui.form input[type="password"], +.ui.form input[type="number"], +.ui.form input[type="url"], +.ui.form input[type="tel"] { + border-bottom: 1px solid #DDDDDD; +} + +.ui.form .selection.dropdown { + border: none; + box-shadow: none !important; + border-bottom: 1px solid #DDDDDD; + border-radius: 0em !important; +} + +.ui.form .ui.icon.input > .icon { + width: 1em; +} \ No newline at end of file diff --git a/build/less/themes/packages/flat/collections/form.variables b/build/less/themes/packages/flat/collections/form.variables new file mode 100644 index 000000000..bf27abee7 --- /dev/null +++ b/build/less/themes/packages/flat/collections/form.variables @@ -0,0 +1,74 @@ +/******************************* + Form +*******************************/ + +/*------------------- + Elements +--------------------*/ + + +/* Text */ +@paragraphMargin: 1em 0em; + +/* Field */ +@fieldMargin: 0em 0em 1em; + +/* Form Label */ +@labelFontSize: 0.8em; +@labelTextTransform: uppercase; + +@groupedLabelTextTransform: none; + +/* Input */ +@inputVerticalPadding: 0.8em; +@inputHorizontalPadding: 0.5em; +@inputBackground: transparent; +@inputBorder: none; +@inputBorderRadius: 0em; +@inputBoxShadow: none; + +@textAreaPadding: 1em; +@textAreaBackground: transparent; +@textAreaFocusBackground: #EEEEEE; +@textAreaBorder: 1px solid #DDDDDD; + +/* Divider */ +@dividerMargin: 1em 0em; + +/* Validation Prompt */ +@validationMargin: 0em 0em 0em 1em; +@validationArrowOffset: -0.3em; + +/*------------------- + States +--------------------*/ + +/* Disabled */ + +/* Focus */ +@inputFocusPointerSize: 0px; +@inputErrorPointerSize: 0px; + +/* Dropdown Error */ +@dropdownErrorHoverBackground: #FFF2F2; +@dropdownErrorActiveBackground: #FDCFCF; + +/* Focused Error */ +@inputErrorFocusBackground: @negativeBackgroundColor; +@inputErrorFocusColor: @negativeColorHover; +@inputErrorFocusBorder: @negativeBorderColor; +@inputErrorFocusBoxShadow: @inputErrorPointerSize 0em 0em 0em @negativeColorHover inset; + +/* Placeholder */ +@inputPlaceholderColor: lighten(@inputColor, 55); +@inputPlaceholderFocusColor: lighten(@inputColor, 35); +@inputErrorPlaceholderColor: lighten(@formErrorColor, 10); +@inputErrorPlaceholderFocusColor: lighten(@formErrorColor, 5); + +/* Loading */ +@formLoaderDimmerColor: rgba(255, 255, 255, 0.6); +@formLoaderPath: "@{imagePath}/loader-large.gif"; +@formLoaderPosition: 50% 50%; + +/* (x) Wide Field */ +@gutterWidth: 1.5em; diff --git a/server/files/javascript/semantic.js b/server/files/javascript/semantic.js index 9da6388b6..52b10895c 100755 --- a/server/files/javascript/semantic.js +++ b/server/files/javascript/semantic.js @@ -62,10 +62,9 @@ semantic.ready = function() { $example = $('.example'), $shownExample = $example.filter('.shown'), - $mode = $('.header .mode.button'), - $developer = $('.header .developer.item'), - $overview = $('.header .overview.item'), - $designer = $('.header .designer.item'), + $overview = $('.overview.button'), + //$developer = $('.header .developer.item'), + //$designer = $('.header .designer.item'), $sidebarButton = $('.fixed.launch.button'), $code = $('div.code').not('.existing'), @@ -461,16 +460,12 @@ semantic.ready = function() { $body.toggleClass('overview'); $button.toggleClass('active'); if($body.hasClass('overview')) { - $developer.addClass('disabled').popup('destroy'); - $designer.addClass('disabled').popup('destroy'); $example.each(function() { $(this).children().not('.ui.header:eq(0), .example p:eq(0), .annotation').hide(); }); $example.filter('.another').hide(); } else { - $developer.removeClass('disabled').popup(); - $designer.removeClass('disabled').popup(); $example.each(function() { $(this).children().not('.ui.header:eq(0), .example p:eq(0), .annotation').show(); }); @@ -480,8 +475,12 @@ semantic.ready = function() { }, developerMode: function() { var + $body = $('body'), $example = $('.example').not('.no') ; + if($body.hasClass('overview')) { + handler.overviewMode(); + } $developer.addClass('active'); $designer.removeClass('active'); $example @@ -493,8 +492,12 @@ semantic.ready = function() { }, designerMode: function() { var + $body = $('body'), $example = $('.example').not('.no') ; + if($body.hasClass('overview')) { + handler.overviewMode(); + } $designer.addClass('active'); $developer.removeClass('active'); $example @@ -882,16 +885,13 @@ semantic.ready = function() { $swap .on('click', handler.swapStyle) ; - - $mode - .dropdown() - ; +/* $developer .on('click', handler.developerMode) ; $designer .on('click', handler.designerMode) - ; + ;*/ $overview .on('click', handler.overviewMode) ; diff --git a/server/files/stylesheets/semantic.css b/server/files/stylesheets/semantic.css index 5db3765a3..2d382ef73 100755 --- a/server/files/stylesheets/semantic.css +++ b/server/files/stylesheets/semantic.css @@ -48,7 +48,6 @@ body#example { margin: 0px; padding: 0px; color: #555555; - min-width: 320px; font-family: "Lato", "Helvetica Neue", Arial, sans-serif; } body > .content { @@ -226,7 +225,6 @@ a:hover { #example .main.menu { top: 0px; left: -1px; - min-width: 320px; width: calc(100% + 1px); } #example .main.menu iframe { @@ -1490,10 +1488,13 @@ body.progress .ui.progress .bar { @media only screen and (min-width : 600px) and (max-width : 998px) { #example .container { width: auto; - margin: 0em 3rem; + margin: 0em 2rem; + } + #example .header .button { + margin-bottom: 0.5em; } #example .main.container { - padding: 1em; + padding: 1em 2em; } } @media only screen and (max-width : 998px) { @@ -1505,6 +1506,16 @@ body.progress .ui.progress .bar { #example .following.menu { display: block; } + #example .introduction { + display: block; + } + #example .advertisement { + left: 100%; + padding-left: 0em; + position: absolute; + top: 0em; + vertical-align: top; + } #example .container { right: 100px; } @@ -1597,6 +1608,7 @@ body.progress .ui.progress .bar { display: none; } #example .fixed .launch { + cursor: pointer; display: inline-block; } } @@ -1706,7 +1718,7 @@ body.progress .ui.progress .bar { display: none; } #example .main.menu .github.item { - display: block; + display: inline-block; } #example .main.menu .github.item:before { display: none; diff --git a/server/partials/header.html.eco b/server/partials/header.html.eco index f7453c619..0843a40a5 100755 --- a/server/partials/header.html.eco +++ b/server/partials/header.html.eco @@ -19,19 +19,8 @@ <% end %> -
- Change View -
- - Definition - - - Designer - - - Developer - -
+
+ Definition
<% if @document.themes?: %>