From 0e8f59c16fcb21301c736ecbc4424cb4c5388c42 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Mon, 29 Feb 2016 19:42:08 +0100 Subject: Refactoring Grape API methods into normal controllers & other things --- app/assets/stylesheets/accounts.scss | 39 ++++++ app/assets/stylesheets/api/salmon.scss | 3 + app/assets/stylesheets/api/subscriptions.scss | 3 + app/assets/stylesheets/application.scss | 5 +- app/assets/stylesheets/atom.scss | 3 - app/assets/stylesheets/profile.scss | 176 -------------------------- app/assets/stylesheets/stream_entries.scss | 131 +++++++++++++++++++ app/assets/stylesheets/xrd.scss | 3 - 8 files changed, 179 insertions(+), 184 deletions(-) create mode 100644 app/assets/stylesheets/accounts.scss create mode 100644 app/assets/stylesheets/api/salmon.scss create mode 100644 app/assets/stylesheets/api/subscriptions.scss delete mode 100644 app/assets/stylesheets/atom.scss delete mode 100644 app/assets/stylesheets/profile.scss create mode 100644 app/assets/stylesheets/stream_entries.scss delete mode 100644 app/assets/stylesheets/xrd.scss (limited to 'app/assets/stylesheets') diff --git a/app/assets/stylesheets/accounts.scss b/app/assets/stylesheets/accounts.scss new file mode 100644 index 000000000..a777633f1 --- /dev/null +++ b/app/assets/stylesheets/accounts.scss @@ -0,0 +1,39 @@ +.card { + display: flex; + background: $primary-color; + box-shadow: 4px 3px 0 rgba(0, 0, 0, 0.1); + + .bio { + flex-grow: 1; + } + + .name { + font-size: 20px; + line-height: 18px * 1.5; + color: $quaternary-color; + + small { + display: block; + font-size: 14px; + color: $quaternary-color; + } + } + + .avatar { + width: 96px; + float: left; + margin-right: 10px; + padding: 10px; + padding-right: 0; + padding-left: 9px; + margin-top: -30px; + + img { + width: 94px; + height: 94px; + display: block; + border-radius: 5px; + box-shadow: 4px 3px 0 rgba(0, 0, 0, 0.1); + } + } +} diff --git a/app/assets/stylesheets/api/salmon.scss b/app/assets/stylesheets/api/salmon.scss new file mode 100644 index 000000000..13cb648a8 --- /dev/null +++ b/app/assets/stylesheets/api/salmon.scss @@ -0,0 +1,3 @@ +// Place all the styles related to the API::Salmon controller here. +// They will automatically be included in application.css. +// You can use Sass (SCSS) here: http://sass-lang.com/ diff --git a/app/assets/stylesheets/api/subscriptions.scss b/app/assets/stylesheets/api/subscriptions.scss new file mode 100644 index 000000000..9bee8c9bd --- /dev/null +++ b/app/assets/stylesheets/api/subscriptions.scss @@ -0,0 +1,3 @@ +// Place all the styles related to the API::Subscriptions controller here. +// They will automatically be included in application.css. +// You can use Sass (SCSS) here: http://sass-lang.com/ diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss index 9787c6be1..552356a22 100644 --- a/app/assets/stylesheets/application.scss +++ b/app/assets/stylesheets/application.scss @@ -20,7 +20,7 @@ body { } .container { - width: 800px; + width: 700px; margin: 0 auto; margin-top: 40px; } @@ -40,4 +40,5 @@ body { @import 'home'; -@import 'profile'; +@import 'accounts'; +@import 'stream_entries'; diff --git a/app/assets/stylesheets/atom.scss b/app/assets/stylesheets/atom.scss deleted file mode 100644 index 888698db3..000000000 --- a/app/assets/stylesheets/atom.scss +++ /dev/null @@ -1,3 +0,0 @@ -// Place all the styles related to the Atom controller here. -// They will automatically be included in application.css. -// You can use Sass (SCSS) here: http://sass-lang.com/ diff --git a/app/assets/stylesheets/profile.scss b/app/assets/stylesheets/profile.scss deleted file mode 100644 index 49ce98d02..000000000 --- a/app/assets/stylesheets/profile.scss +++ /dev/null @@ -1,176 +0,0 @@ -.card { - display: flex; - background: $darker-background-color; - border: 1px solid darken($darker-background-color, 15%); - box-shadow: 4px 3px 0 rgba(0, 0, 0, 0.1); - - .bio { - flex-grow: 1; - } - - .name { - font-size: 24px; - line-height: 18px * 1.5; - color: $text-color; - - small { - display: block; - font-size: 14px; - color: $lighter-text-color; - } - } - - .avatar { - width: 96px; - float: left; - margin-right: 10px; - padding: 10px; - padding-left: 9px; - margin-top: -30px; - - img { - width: 94px; - height: 94px; - display: block; - border: 2px solid $lighter-text-color; - border-radius: 5px; - } - } -} - -.activity-stream { - clear: both; - box-shadow: 4px 3px 0 rgba(0, 0, 0, 0.1); - - .entry { - border-bottom: 1px solid darken($background-color, 10%); - background: $background-color; - border-left: 2px solid $primary-color; - - &.entry-reblog { - border-left: 2px solid $tertiary-color; - } - - &.entry-predecessor, &.entry-successor { - border-left: 2px solid $lighter-text-color; - background: darken($background-color, 5%); - } - - &.entry-follow, &.entry-favourite { - .content { - padding-top: 10px; - padding-bottom: 10px; - } - } - - &:last-child { - border-bottom: 0; - } - } - - .entry__container { - display: flex; - } - - .avatar { - width: 48px; - padding: 10px; - padding-left: 8px; - padding-right: 0; - padding-top: 12px; - - img { - width: 48px; - height: 48px; - display: block; - border-radius: 5px; - } - } - - .entry__container__container { - flex-grow: 1; - } - - .header { - margin-bottom: 10px; - padding: 10px; - padding-bottom: 0; - - .name { - text-decoration: none; - color: $lighter-text-color; - - strong { - color: $text-color; - } - - &:hover { - strong { - text-decoration: underline; - } - } - } - } - - .pre-header { - border-bottom: 1px solid darken($background-color, 10%); - color: $tertiary-color; - padding: 5px 10px; - padding-left: 8px; - clear: both; - - .name { - color: $tertiary-color; - font-weight: bold; - text-decoration: none; - - &:hover { - text-decoration: underline; - } - } - } - - .content { - font-size: 16px; - padding: 0 10px; - padding-left: 8px; - - a { - color: $primary-color; - text-decoration: none; - - &:hover { - text-decoration: underline; - } - } - } - - .time { - text-decoration: none; - color: $lighter-text-color; - - &:hover { - text-decoration: underline; - } - } - - .counters { - margin-top: 15px; - color: $lighter-text-color; - cursor: default; - padding: 10px; - padding-top: 0; - - .counter { - display: inline-block; - margin-right: 10px; - color: $lighter-text-color; - } - - .conversation-link { - color: $primary-color; - text-decoration: underline; - float: right; - } - } -} diff --git a/app/assets/stylesheets/stream_entries.scss b/app/assets/stylesheets/stream_entries.scss new file mode 100644 index 000000000..5689880ca --- /dev/null +++ b/app/assets/stylesheets/stream_entries.scss @@ -0,0 +1,131 @@ + +.activity-stream { + clear: both; + box-shadow: 4px 3px 0 rgba(0, 0, 0, 0.1); + + .entry { + border-bottom: 1px solid $darker-background-color; + background: $background-color; + border-left: 2px solid $primary-color; + + &.entry-reblog { + border-left: 2px solid $tertiary-color; + + .content { + a { + color: $tertiary-color; + } + } + } + + &.entry-predecessor, &.entry-successor { + border-left: 2px solid $lighter-text-color; + background: darken($background-color, 5%); + + .content { + a { + color: $lighter-text-color; + } + } + } + + &.entry-follow, &.entry-favourite { + .content { + padding-top: 10px; + padding-bottom: 10px; + } + } + + &:last-child { + border-bottom: 0; + } + } + + .entry__container { + display: flex; + } + + .avatar { + width: 48px; + padding: 10px; + padding-left: 8px; + padding-right: 0; + padding-top: 12px; + + img { + width: 48px; + height: 48px; + display: block; + border-radius: 5px; + } + } + + .entry__container__container { + flex-grow: 1; + } + + .header { + margin-bottom: 5px; + padding: 10px; + padding-bottom: 0; + padding-left: 8px; + + .name { + text-decoration: none; + color: $lighter-text-color; + + strong { + color: $text-color; + } + + &:hover { + strong { + text-decoration: underline; + } + } + } + } + + .pre-header { + border-bottom: 1px solid darken($background-color, 5%); + color: $tertiary-color; + padding: 5px 10px; + padding-left: 8px; + clear: both; + + .name { + color: $tertiary-color; + font-weight: bold; + text-decoration: none; + + &:hover { + text-decoration: underline; + } + } + } + + .content { + font-size: 14px; + padding: 0 10px; + padding-left: 8px; + padding-bottom: 25px; + + a { + color: $primary-color; + text-decoration: none; + + &:hover { + text-decoration: underline; + } + } + } + + .time { + text-decoration: none; + color: $lighter-text-color; + + &:hover { + text-decoration: underline; + } + } +} diff --git a/app/assets/stylesheets/xrd.scss b/app/assets/stylesheets/xrd.scss deleted file mode 100644 index 62391c7d3..000000000 --- a/app/assets/stylesheets/xrd.scss +++ /dev/null @@ -1,3 +0,0 @@ -// Place all the styles related to the XRD controller here. -// They will automatically be included in application.css. -// You can use Sass (SCSS) here: http://sass-lang.com/ -- cgit