From: Laury GvR Date: Mon, 7 Nov 2016 14:29:07 +0000 (-0500) Subject: Improve Member DB event add form styles X-Git-Tag: v1.0.0^2~15 X-Git-Url: http://cvs2.gaslightmedia.com/gitweb/index.cgi?a=commitdiff_plain;h=492c32ea5e4f699d8b8818950c55a59b8fea0ece;p=WP-Themes%2Fkalamazoobeerweek.git Improve Member DB event add form styles Styles now look good in mobile view. Simplified css as well, was able to use a lot more concise styles to produce the same result. Labels vertical position of word makes a lot more sense now. --- diff --git a/parts/glm-members-only-top-bar.php b/parts/glm-members-only-top-bar.php index bb67f35..0207260 100644 --- a/parts/glm-members-only-top-bar.php +++ b/parts/glm-members-only-top-bar.php @@ -2,7 +2,7 @@
Hello, user_login ?>.
Logout - + Enter Admin Area \ No newline at end of file diff --git a/scss/plugins/_glm-member-db-events.scss b/scss/plugins/_glm-member-db-events.scss index db44346..5ee240e 100644 --- a/scss/plugins/_glm-member-db-events.scss +++ b/scss/plugins/_glm-member-db-events.scss @@ -151,11 +151,6 @@ $eventMonthColor : $d-blue; .detail-search-form{ width: 100% !important; } -#frontForm #newEvent { - background-color: $red; - padding: 0.4em 0.8em; - border-radius: 4px; -} .event-types-label, .beer-types-label, .venues-label, .brewery-label{ color: #B4D433; @@ -175,3 +170,78 @@ form#glm-member-event-search .glm-search-icon{ color: #B4D433 !important; } +#frontForm #newEvent { + background-color: $red; + padding: 0.6em 1.2em; + border-radius: 4px; + display: block; + margin: 0 auto; +} +.glm-event-table tbody { + background-color: $light-tan; +} +.glm-event-table tr.even, +.glm-event-table tr.alt, +.glm-event-table tr:nth-of-type(2n) { + background-color: rgba(0,0,0,0.05); +} +.glm-add-event-form-wrapper { + border: 1px solid white; + color: black; + background-color: $light-tan; + width: 100%; + display: table; + margin-bottom: 20px; + @media #{$medium-down} { + max-width: 600px; + margin: 0 auto 20px; + } + .glm-add-event-form-item { + clear: both; + display: block; + position: relative; + border: 1px solid white; + @media #{$large-up} { + display: -ms-flex; display: -webkit-flex; display: flex; + } + } + .glm-add-event-form-item:nth-of-type(2n) { + background-color: rgba(0, 0, 0, 0.05); + } + .glm-add-event-form-label { + float: left; + position: relative; + @media #{$large-up} { + width: 30%; + } + @media #{$medium-down} { + width: 100%; + clear: both; + } + label { + padding: 10px; + @media #{$large-up} { + } + @media #{$medium-down} { + padding-bottom: 0; + } + } + } + .glm-add-event-form-data { +/* min-height: 60px;*/ + position: relative; + @media #{$large-up} { + padding: 10px; + width: 70%; + float: right; + border-left: 1px solid white; + border-right: 1px solid white; + } + @media #{$medium-down} { + padding: 0 10px 10px; + width: 100%; + clear: both; + padding-top: 4px; + } + } +} diff --git a/scss/plugins/_glm-member-db.scss b/scss/plugins/_glm-member-db.scss index d1d9230..ab8b5eb 100644 --- a/scss/plugins/_glm-member-db.scss +++ b/scss/plugins/_glm-member-db.scss @@ -187,14 +187,6 @@ body { .glm-button { background-color: $red; } - .glm-event-table tbody { - background-color: $light-tan; - } - .glm-event-table tr.even, - .glm-event-table tr.alt, - .glm-event-table tr:nth-of-type(2n) { - background-color: rgba(0,0,0,0.05); - } .breadcrumbs { background-color: transparent; display: none;