From 12279aed3b18d3fa3bfd38080d9a3f9cd61d3a74 Mon Sep 17 00:00:00 2001 From: bill bittner Date: Tue, 26 Sep 2017 15:12:47 -0700 Subject: [PATCH] updated css --- helpers/publishHelpers.js | 2 +- .../assets/css/{generalStyle.css => BEM.css} | 258 ++++++++++-------- public/assets/css/componentStyle.css | 40 --- public/assets/css/mediaQueries.css | 59 ++++ public/assets/css/reset.css | 0 views/index.handlebars | 15 +- views/layouts/main.handlebars | 4 +- views/layouts/show.handlebars | 6 +- views/login.handlebars | 19 +- views/partials/asset.handlebars | 2 +- ...dlebars => channelCreationForm.handlebars} | 45 +-- ...handlebars => channelLoginForm.handlebars} | 38 ++- views/partials/footer.handlebars | 2 +- views/partials/learnMore.handlebars | 2 +- ...dlebars => publishForm-Channel.handlebars} | 30 +- ...dlebars => publishForm-Details.handlebars} | 19 +- views/partials/publishForm-Url.handlebars | 14 + views/partials/publishForm.handlebars | 50 ++-- views/partials/topBar.handlebars | 25 +- 19 files changed, 376 insertions(+), 254 deletions(-) rename public/assets/css/{generalStyle.css => BEM.css} (71%) create mode 100644 public/assets/css/mediaQueries.css create mode 100644 public/assets/css/reset.css rename views/partials/{channelCreation.handlebars => channelCreationForm.handlebars} (58%) rename views/partials/{channelLogin.handlebars => channelLoginForm.handlebars} (50%) rename views/partials/{publishChannel.handlebars => publishForm-Channel.handlebars} (75%) rename views/partials/{publishDetails.handlebars => publishForm-Details.handlebars} (72%) create mode 100644 views/partials/publishForm-Url.handlebars diff --git a/helpers/publishHelpers.js b/helpers/publishHelpers.js index b308f764..c8ffc5c2 100644 --- a/helpers/publishHelpers.js +++ b/helpers/publishHelpers.js @@ -73,7 +73,7 @@ module.exports = { if (title === '' || title === null) { title = name; } - if (description === ' ' || description === null) { + if (description.trim() === '' || description === null) { description = `${name} published via spee.ch`; } // create the publish params diff --git a/public/assets/css/generalStyle.css b/public/assets/css/BEM.css similarity index 71% rename from public/assets/css/generalStyle.css rename to public/assets/css/BEM.css index acedc6a2..15c3cc99 100644 --- a/public/assets/css/generalStyle.css +++ b/public/assets/css/BEM.css @@ -1,26 +1,21 @@ + +/* TEXT */ + body, button, input, textarea, label, select, option { font-family: serif; } -/* Containters */ +p { + padding-left: 0.3em; +} + +/* CONTAINERS */ .wrapper { margin-left: 20%; width:60%; } -.top-bar { - width: 100%; - margin-bottom: 2px; - padding-bottom: 2px; - border-bottom: 1px lightgrey solid; - margin-top: 2em; - overflow: auto; - text-align: right; - display: inline-block; - vertical-align: text-bottom; -} - .full { clear: both; } @@ -28,7 +23,12 @@ body, button, input, textarea, label, select, option { .main { float: left; width: 65%; - + +} + +.panel { + overflow: auto; + word-wrap: break-word; } .sidebar { @@ -49,12 +49,7 @@ footer { color: grey; } -/* panels */ - -.panel { - overflow: auto; - word-wrap: break-word; -} +/* COLUMNS AND ROWS */ .col-left, .col-right { overflow: auto; @@ -72,13 +67,84 @@ footer { float: right; } -/* text */ +.row { + padding: 1em 2% 1em 2%; + margin: 0px; -a, a:visited { - color: blue; - text-decoration: none; } +.row--wide { + padding: 1em 0px 1em 0px; + margin: 0px; + +} + +.top-bar { + margin: 2em 0px 2px 0px; + padding: 0px 0px 2px 0px; + border-bottom: 1px lightgrey solid; + overflow: auto; + text-align: right; + vertical-align: text-bottom; +} + + +.column { + display: inline-block; + padding: 0px; + margin: 0px; +} + +.column--1 { + width: 8%; +} + +.column--2 { + width: 16%; +} + +.column--3 { + width: 24%; +} + +.column--4 { + width: 32%; +} + +.column--5 { + width: 40%; +} + +.column--6 { + width: 48%; +} + +.column--7 { + width: 56%; +} + +.column--8 { + width: 64%; +} + +.column--9 { + width: 72%; +} + +.column--10 { + width: 80%; +} + +.column--11 { + width: 88%; +} + +.column--12 { + width: 96%; +} + +/* HEADERS */ + h1 { font-size: x-large; } @@ -103,21 +169,55 @@ h4 { text-align: center; } -/* other */ +/* LINKS */ -input { +a, a:visited { + color: blue; + text-decoration: none; +} + +/* ERROR MESSAGES */ + +.info-message { + font-weight: bold; +} + +.info-message--success { + color: green; +} + +.info-message--failure { + color: red; +} + +/* INPUT FIELDS */ + +input:-webkit-autofill { + -webkit-box-shadow: 0 0 0px 1000px white inset; +} + +.label, .input-text, .select, .textarea { + font-size: medium; padding: 0.3em; + outline: none; + border: 0px; + background-color: white; } -table { - width: 100%; - text-align: left; +.input-text--primary, .select--primary, .textarea--primary { + border-bottom: 1px solid blue; } +.input-text--primary:focus, .select--primary:focus, .textarea--primary:focus { + border-bottom: 1px solid grey; +} + +/* BUTTONS */ + button { border: 1px solid black; padding: 0.5em; - margin: 0.5em 0 0.5em 0; + margin: 0.5em 0.3em 0.5em 0.3em; color: black; background-color: white; } @@ -134,6 +234,15 @@ button:active{ background-color: white; } +/* TABLES */ + +table { + width: 100%; + text-align: left; +} + +/* other */ + .stop-float { clear: both; } @@ -144,93 +253,4 @@ button:active{ .wrap-words { word-wrap: break-word; -} - -/* BEM */ - -.info-message { - font-weight: bold; -} - -.info-message--success { - color: green; -} - -.info-message--failure { - color: red; -} - -input:-webkit-autofill { - -webkit-box-shadow: 0 0 0px 1000px white inset; -} - -.input-text, .select, .textarea { - outline: none; - border: 0px; - background-color: white; -} - -.input-text--primary, .select--primary, .textarea--primary { - border-bottom: 1px solid blue; -} - -.input-text--primary:focus, .select--primary:focus, .textarea--primary:focus { - border-bottom: 1px solid grey; -} - -/* MEDIA QUERIES */ - -@media (max-width: 1250px) { - - .wrapper { - margin-left: 10%; - width:80%; - } - -} - -@media (max-width: 1000px) { - - .wrapper { - margin-left: 10%; - width:80%; - } - - .main { - float: none; - width: 100%; - margin-right: 0px; - padding-right: 0px; - border-right: 0px; - margin-bottom: 5px; - } - - .sidebar { - border-top: 1px solid lightgray; - float: none; - width: 100%; - } - -} - -@media (max-width: 750px ) { - .col-left, .col-right { - float: none; - margin: 0px; - padding: 0px; - width: 100%; - } - - .col-right { - padding-top: 20px; - } -} - -@media (max-width: 475px) { - - .wrapper { - margin: 0px; - width: 100%; - } - } \ No newline at end of file diff --git a/public/assets/css/componentStyle.css b/public/assets/css/componentStyle.css index b5514d39..87944b8d 100644 --- a/public/assets/css/componentStyle.css +++ b/public/assets/css/componentStyle.css @@ -108,8 +108,6 @@ button.copy-button { /* learn more */ .learn-more { text-align: center; - margin-top: 2px; - padding-top: 2px; border-top: 1px solid lightgrey; } @@ -200,42 +198,4 @@ button.copy-button { word-wrap: break-word; } -@media (max-width: 750px) { - - .all-claims-asset { - width:30%; - } - .all-claims-details { - font-size: small; - } - - .show-asset-lite { - width: 100%; - } - - .top-bar-tagline { - clear: both; - text-align: left; - width: 100%; - } - -} - -@media (max-width: 475px) { - - div#publish-active-area { - margin-left: 2em; - margin-right: 2em; - } - - .all-claims-asset { - width:50%; - } - - .top-bar-right { - display: none; - } - - -} diff --git a/public/assets/css/mediaQueries.css b/public/assets/css/mediaQueries.css new file mode 100644 index 00000000..6a36df91 --- /dev/null +++ b/public/assets/css/mediaQueries.css @@ -0,0 +1,59 @@ +@media (max-width: 1250px) { + .wrapper { + margin-left: 10%; + width:80%; + } +} + +@media (max-width: 1000px) { + .wrapper { + margin-left: 10%; + width:80%; + } + + .main { + float: none; + width: 100%; + margin-right: 0px; + padding-right: 0px; + border-right: 0px; + margin-bottom: 5px; + } + + .sidebar { + border-top: 1px solid lightgray; + float: none; + width: 100%; + } +} + +@media (max-width: 750px ) { + .col-left, .col-right { + float: none; + margin: 0px; + padding: 0px; + width: 100%; + } + + .col-right { + padding-top: 20px; + } + + .all-claims-asset { + width:30%; + } + + .all-claims-details { + font-size: small; + } + + .show-asset-lite { + width: 100%; + } + + .top-bar-tagline { + clear: both; + text-align: left; + width: 100%; + } +} diff --git a/public/assets/css/reset.css b/public/assets/css/reset.css new file mode 100644 index 00000000..e69de29b diff --git a/views/index.handlebars b/views/index.handlebars index 31662191..1e117a51 100644 --- a/views/index.handlebars +++ b/views/index.handlebars @@ -1,10 +1,11 @@ -
- {{> topBar}} -
- {{> publishForm}} - {{> learnMore}} -
- {{> footer}} +
+
+
+ {{> topBar}} + {{> publishForm}} + {{> learnMore}} + {{> footer}} +
diff --git a/views/layouts/main.handlebars b/views/layouts/main.handlebars index 41bd4daf..ea4184b4 100644 --- a/views/layouts/main.handlebars +++ b/views/layouts/main.handlebars @@ -5,8 +5,10 @@ Spee.ch - + + + diff --git a/views/layouts/show.handlebars b/views/layouts/show.handlebars index 0bf410fb..d0130e4b 100644 --- a/views/layouts/show.handlebars +++ b/views/layouts/show.handlebars @@ -5,8 +5,10 @@ Spee.ch - - + + + + {{#unless fileInfo.nsfw}} {{{addTwitterCard fileInfo.fileType openGraphInfo.source openGraphInfo.embedUrl openGraphInfo.directFileUrl}}} diff --git a/views/login.handlebars b/views/login.handlebars index ff0f9ecd..f0e4ec41 100644 --- a/views/login.handlebars +++ b/views/login.handlebars @@ -1,17 +1,22 @@
{{> topBar}} -
- +

Log In

-

Log in to an existing channel:

- {{>channelLogin}} +
+

Log in to an existing channel:

+ {{>channelLoginForm}} +
+
+

Create New

-

Create a brand new channel:

- {{>channelCreation}} +
+

Create a brand new channel:

+ {{>channelCreationForm}} +
{{> footer}}
- + \ No newline at end of file diff --git a/views/partials/asset.handlebars b/views/partials/asset.handlebars index eb607d24..a963b07d 100644 --- a/views/partials/asset.handlebars +++ b/views/partials/asset.handlebars @@ -1,4 +1,4 @@ -
+
{{#ifConditional fileInfo.fileType '===' 'video/mp4'}} diff --git a/views/partials/channelCreation.handlebars b/views/partials/channelCreationForm.handlebars similarity index 58% rename from views/partials/channelCreation.handlebars rename to views/partials/channelCreationForm.handlebars index 1f538a7f..058b28f5 100644 --- a/views/partials/channelCreation.handlebars +++ b/views/partials/channelCreationForm.handlebars @@ -1,22 +1,35 @@ -
-

-

-
-
- - @ - -
-
-
- - -
-
-

+ +
+ +
+ +
+
+
+
+ @ + + +
+
+ +
+ +
+
+
+ +
+ +
+
+ +
+ + \ No newline at end of file