From 3f51128e24e1ca3247169066aa6a03090df98dd6 Mon Sep 17 00:00:00 2001 From: elijah Date: Mon, 17 Jun 2013 01:26:35 -0700 Subject: start of new ui - css changes, layout changes, navigation changes. --- app/assets/stylesheets/application.scss | 15 +++----- app/assets/stylesheets/leap.scss | 65 +++++++++++++++++++++++++++++++++ 2 files changed, 70 insertions(+), 10 deletions(-) create mode 100644 app/assets/stylesheets/leap.scss (limited to 'app/assets/stylesheets') diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss index 25e854e..5a5e900 100644 --- a/app/assets/stylesheets/application.scss +++ b/app/assets/stylesheets/application.scss @@ -1,7 +1,7 @@ // // import custom scss, content to be set in deployment. // -@import "tail"; +@import "head"; // First import journal variables @import "bootswatch/cerulean/variables"; @@ -10,17 +10,12 @@ // import bootstrap. // @import "bootstrap"; -body { padding-top: 60px; } - @import "bootstrap-responsive"; -table.table-hover .btn { - opacity: 0; -} -table.table-hover tr:hover .btn { - opacity: 1; -} -@import "bootstrap-editable"; +// +// LEAP web app specific overrides +// +@import "leap"; // And finally bootswatch style itself @import "bootswatch/cerulean/bootswatch"; diff --git a/app/assets/stylesheets/leap.scss b/app/assets/stylesheets/leap.scss new file mode 100644 index 0000000..42638eb --- /dev/null +++ b/app/assets/stylesheets/leap.scss @@ -0,0 +1,65 @@ + +table.table-hover .btn { + opacity: 0; +} +table.table-hover tr:hover .btn { + opacity: 1; +} + +.debug { + outline: 1px solid red; +} + +// +// Icons +// + + +// force a black icon, even if bootstrap thinks differently +.icon-black { + background-image: url(/assets/glyphicons-halflings.png) !important; +} + +// +// Typography +// + +.first { + margin-top: 0; + padding-top: 0; +} + +// +// Boring default masthead +// + +#masthead { + background: #eee; + margin-bottom: 10px; + border-bottom: 1px solid #e6e6e6; + .title { + padding: 20px; + font-size: 1.25em; + } + .sitename { + font-weight: bold; + } +} + +// +// Side Navigation +// + +.sidenav { + @extend .nav-tabs; + @extend .nav-stacked; + box-shadow: 0 2px 4px rgba(0,0,0,.1); + li.active { + a, a:hover { + background-color: $blueDark; + color: $white; + border-color: darken($blueDark, 10%); + cursor: pointer; + } + } +} -- cgit v1.2.3 From 8393058ac15d72be702a6de481d6129aed4bbef3 Mon Sep 17 00:00:00 2001 From: elijah Date: Wed, 19 Jun 2013 00:33:19 -0700 Subject: new ui for tickets --- app/assets/stylesheets/leap.scss | 73 ++++++++++++++++++++++++++++++++++------ 1 file changed, 63 insertions(+), 10 deletions(-) (limited to 'app/assets/stylesheets') diff --git a/app/assets/stylesheets/leap.scss b/app/assets/stylesheets/leap.scss index 42638eb..6b44986 100644 --- a/app/assets/stylesheets/leap.scss +++ b/app/assets/stylesheets/leap.scss @@ -6,27 +6,80 @@ table.table-hover tr:hover .btn { opacity: 1; } +.ticket { + td.user { + white-space: nowrap; + } + td.comment { + width: 100%; + } +} + +// +// UTILITY +// + .debug { outline: 1px solid red; } +.full-width { + width: 100%; +} + +.slim { + margin: 0; +} + +.first { + margin-top: 0; + padding-top: 0; +} + // -// Icons +// Typography // +input.large { + font-size: $baseFontSize * 1.25; + line-height: $baseLineHeight * 1.5; +} -// force a black icon, even if bootstrap thinks differently -.icon-black { - background-image: url(/assets/glyphicons-halflings.png) !important; +// +// FORMS +// + +// +// Sometimes we really want full width controls, but this flies in the face of +// what bootstrap does for control sizes, so we have to step on bootstrap's +// toes a bit to make this work. +// +input, textarea { + &.full-width { + height: inherit; + box-sizing: border-box; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + } } // -// Typography +// Labels // -.first { - margin-top: 0; - padding-top: 0; +.label-clear { + background-color: $white; + text-shadow: none; + color: $black; +} + +// +// Icons +// + +// force a black icon, even if bootstrap thinks differently +.icon-black { + background-image: url(/assets/glyphicons-halflings.png) !important; } // @@ -56,9 +109,9 @@ table.table-hover tr:hover .btn { box-shadow: 0 2px 4px rgba(0,0,0,.1); li.active { a, a:hover { - background-color: $blueDark; + background-color: $linkColor; color: $white; - border-color: darken($blueDark, 10%); + border-color: darken($linkColor, 0%); cursor: pointer; } } -- cgit v1.2.3 From e5a37b4ed76df8aec6131789e7361ed6efa3394b Mon Sep 17 00:00:00 2001 From: elijah Date: Sun, 23 Jun 2013 22:18:28 -0700 Subject: new home page --- app/assets/stylesheets/leap.scss | 22 ++++++++++++++++++++++ 1 file changed, 22 insertions(+) (limited to 'app/assets/stylesheets') diff --git a/app/assets/stylesheets/leap.scss b/app/assets/stylesheets/leap.scss index 6b44986..a7d6261 100644 --- a/app/assets/stylesheets/leap.scss +++ b/app/assets/stylesheets/leap.scss @@ -45,6 +45,10 @@ input.large { line-height: $baseLineHeight * 1.5; } +.p { + @extend p; +} + // // FORMS // @@ -99,6 +103,24 @@ input, textarea { } } +.home-buttons { + .span6 { + margin-bottom: 20px; + } + div { + a { + width: 10em; + margin-bottom: 4px; + display: block; + } + .info { + } + span { + } + } +} + + // // Side Navigation // -- cgit v1.2.3 From 4863ce5e78d880f1ca8a1874cd03022afb061f4a Mon Sep 17 00:00:00 2001 From: elijah Date: Fri, 28 Jun 2013 20:38:14 -0700 Subject: new layout for the home buttons --- app/assets/stylesheets/leap.scss | 112 +++++++++++++++++++++++++-------------- 1 file changed, 71 insertions(+), 41 deletions(-) (limited to 'app/assets/stylesheets') diff --git a/app/assets/stylesheets/leap.scss b/app/assets/stylesheets/leap.scss index a7d6261..577d211 100644 --- a/app/assets/stylesheets/leap.scss +++ b/app/assets/stylesheets/leap.scss @@ -1,27 +1,24 @@ +// +// LAYOUT +// -table.table-hover .btn { - opacity: 0; -} -table.table-hover tr:hover .btn { - opacity: 1; -} - -.ticket { - td.user { - white-space: nowrap; - } - td.comment { - width: 100%; - } +// This is a trick to be able to use bootstrap fluid layout and also have a max-width. +// It is like having your cake and eating it too. +#main { + *zoom: 1; + margin-left: auto; + margin-right: auto; + width: 1000px; + max-width: 100%; } // // UTILITY // -.debug { - outline: 1px solid red; -} +//.debug { +// outline: 1px solid red; +//} .full-width { width: 100%; @@ -36,8 +33,35 @@ table.table-hover tr:hover .btn { padding-top: 0; } +.last { + margin-bottom: 0; + padding-bottom: 0; +} + // -// Typography +// ICONS +// + +[class^="big-icon-"], +[class*=" big-icon-"] { + display: inline-block; + width: 32px; + height: 32px; + @include ie7-restore-right-whitespace(); + line-height: 32px; + vertical-align: middle; + //background-image: $iconSpritePath; + //background-position: 14px 14px; + background-repeat: no-repeat; + margin-top: 1px; +} + +.big-icon-arrow-down { + background-image: url(/img/32/arrow-down.png) +} + +// +// TYPOGRAPHY // input.large { @@ -50,7 +74,7 @@ input.large { } // -// FORMS +// BOOSTRAP TWEAKS // // @@ -67,27 +91,33 @@ input, textarea { } } -// -// Labels -// - +// like a label, but with no background .label-clear { background-color: $white; text-shadow: none; color: $black; } -// -// Icons -// - // force a black icon, even if bootstrap thinks differently .icon-black { background-image: url(/assets/glyphicons-halflings.png) !important; } // -// Boring default masthead +// TICKETS +// + +.ticket { + td.user { + white-space: nowrap; + } + td.comment { + width: 100%; + } +} + +// +// BORING DEFAULT MASTHEAD // #masthead { @@ -104,25 +134,25 @@ input, textarea { } .home-buttons { - .span6 { - margin-bottom: 20px; + text-align: center; + .first { + margin: 20px 0; } - div { - a { - width: 10em; - margin-bottom: 4px; - display: block; - } - .info { - } - span { + .download { + a.btn { + width: 14em; } } + a.btn { + font-weight: bold; + width: 11em; + margin: 10px auto; + display: block; + } } - // -// Side Navigation +// SIDE NAVIGATION // .sidenav { -- cgit v1.2.3 From b8c44acfa5b1fbc8b35e812bd6c23aa6d824c4b1 Mon Sep 17 00:00:00 2001 From: elijah Date: Tue, 2 Jul 2013 23:19:38 -0700 Subject: cleaned up application layout and some minor css. --- app/assets/stylesheets/leap.scss | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) (limited to 'app/assets/stylesheets') diff --git a/app/assets/stylesheets/leap.scss b/app/assets/stylesheets/leap.scss index 577d211..4a3ca03 100644 --- a/app/assets/stylesheets/leap.scss +++ b/app/assets/stylesheets/leap.scss @@ -38,6 +38,10 @@ padding-bottom: 0; } +.hidden { + display: none; +} + // // ICONS // @@ -50,8 +54,6 @@ @include ie7-restore-right-whitespace(); line-height: 32px; vertical-align: middle; - //background-image: $iconSpritePath; - //background-position: 14px 14px; background-repeat: no-repeat; margin-top: 1px; } @@ -74,7 +76,7 @@ input.large { } // -// BOOSTRAP TWEAKS +// BOOTSTRAP TWEAKS // // @@ -155,6 +157,11 @@ input, textarea { // SIDE NAVIGATION // +.user_heading { + margin: 1em 0; + font-weight: bold; +} + .sidenav { @extend .nav-tabs; @extend .nav-stacked; -- cgit v1.2.3 From 0cd386e0144601f5478f90bbdb401d55c019c828 Mon Sep 17 00:00:00 2001 From: elijah Date: Wed, 3 Jul 2013 11:11:10 -0700 Subject: better ticket view navigation: tickets are now either global in scope (for admins) or stay as a nested resource for a particular user (for normal users and when you visit the tickets list of a particular user). --- app/assets/stylesheets/leap.scss | 9 +++++++++ 1 file changed, 9 insertions(+) (limited to 'app/assets/stylesheets') diff --git a/app/assets/stylesheets/leap.scss b/app/assets/stylesheets/leap.scss index 4a3ca03..792aa3c 100644 --- a/app/assets/stylesheets/leap.scss +++ b/app/assets/stylesheets/leap.scss @@ -105,6 +105,15 @@ input, textarea { background-image: url(/assets/glyphicons-halflings.png) !important; } +// override stupid bootstrap behavior of making the active tab appear non-clickable +// and links not being underline +.nav-tabs > li > a:hover, .sidenav > li > a:hover { + text-decoration: underline; +} +.nav-tabs > .active > a:hover { + cursor: pointer; +} + // // TICKETS // -- cgit v1.2.3 From 40830b4b1fa33b9e26dbd500fc08b4b76b58011b Mon Sep 17 00:00:00 2001 From: elijah Date: Thu, 4 Jul 2013 01:36:08 -0700 Subject: minor changes to css and home page. --- app/assets/stylesheets/leap.scss | 8 ++++++++ 1 file changed, 8 insertions(+) (limited to 'app/assets/stylesheets') diff --git a/app/assets/stylesheets/leap.scss b/app/assets/stylesheets/leap.scss index 792aa3c..6268b3b 100644 --- a/app/assets/stylesheets/leap.scss +++ b/app/assets/stylesheets/leap.scss @@ -184,3 +184,11 @@ input, textarea { } } } + +// +// USERS +// + +.overview li { + padding: 6px 0; +} \ No newline at end of file -- cgit v1.2.3 From 76b26cc26fdb38a96e49702dc5640c91519803df Mon Sep 17 00:00:00 2001 From: elijah Date: Thu, 4 Jul 2013 04:29:04 -0700 Subject: bootswatch is messing up with the bootstrap icons, so i am disabling it for now. --- app/assets/stylesheets/application.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'app/assets/stylesheets') diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss index 5a5e900..28206b1 100644 --- a/app/assets/stylesheets/application.scss +++ b/app/assets/stylesheets/application.scss @@ -4,7 +4,7 @@ @import "head"; // First import journal variables -@import "bootswatch/cerulean/variables"; +// @import "bootswatch/cerulean/variables"; // // import bootstrap. @@ -18,7 +18,7 @@ @import "leap"; // And finally bootswatch style itself -@import "bootswatch/cerulean/bootswatch"; +// @import "bootswatch/cerulean/bootswatch"; // // import custom scss, content to be set in deployment. -- cgit v1.2.3