From 6107e954040443d1fc4344b440b229d70fe75166 Mon Sep 17 00:00:00 2001 From: kibigo! Date: Wed, 28 Jun 2017 00:27:44 -0700 Subject: Backend YAML Processing + Profile Metadata on Static Pages --- app/views/accounts/_header.html.haml | 45 +++++++++++++++++++++--------------- 1 file changed, 26 insertions(+), 19 deletions(-) (limited to 'app/views/accounts') diff --git a/app/views/accounts/_header.html.haml b/app/views/accounts/_header.html.haml index 6451a5573..ef6a2bcbe 100644 --- a/app/views/accounts/_header.html.haml +++ b/app/views/accounts/_header.html.haml @@ -1,23 +1,24 @@ -.card.h-card.p-author{ style: "background-image: url(#{account.header.url(:original)})" } - - if user_signed_in? && current_account.id != account.id && !current_account.requested?(account) - .controls - - if current_account.following?(account) - = link_to t('accounts.unfollow'), account_unfollow_path(account), data: { method: :post }, class: 'button' - - else - = link_to t('accounts.follow'), account_follow_path(account), data: { method: :post }, class: 'button' - - elsif !user_signed_in? - .controls - .remote-follow - = link_to t('accounts.remote_follow'), account_remote_follow_path(account), class: 'button' - .avatar= image_tag account.avatar.url(:original), class: 'u-photo' - %h1.name - %span.p-name.emojify= display_name(account) - %small - %span @#{account.username} - = fa_icon('lock') if account.locked? - .details +- processed_bio = FrontmatterHandler.instance.process_bio Formatter.instance.simplified_format account +.card.h-card.p-author + .details{ style: "background-image: url(#{account.header.url(:original)})" } + - if user_signed_in? && current_account.id != account.id && !current_account.requested?(account) + .controls + - if current_account.following?(account) + = link_to t('accounts.unfollow'), account_unfollow_path(account), data: { method: :post }, class: 'button' + - else + = link_to t('accounts.follow'), account_follow_path(account), data: { method: :post }, class: 'button' + - elsif !user_signed_in? + .controls + .remote-follow + = link_to t('accounts.remote_follow'), account_remote_follow_path(account), class: 'button' + .avatar= image_tag account.avatar.url(:original), class: 'u-photo' + %h1.name + %span.p-name.emojify= display_name(account) + %small + %span @#{account.username} + = fa_icon('lock') if account.locked? .bio - .account__header__content.p-note.emojify= Formatter.instance.simplified_format(account) + .account__header__content.p-note.emojify!=processed_bio[:text] .details-counters .counter{ class: active_nav_class(short_account_url(account)) } @@ -32,3 +33,9 @@ = link_to account_followers_url(account) do %span.counter-label= t('accounts.followers') %span.counter-number= number_with_delimiter account.followers_count + - if processed_bio[:metadata].length > 0 + .metadata< + - processed_bio[:metadata].each do |i| + .metadata-item>< + %b.emojify>!=i[0] + %span.emojify>!=i[1] -- cgit From 03f964837707cdb01c32d182a68a74a13848c92a Mon Sep 17 00:00:00 2001 From: kibigo! Date: Wed, 28 Jun 2017 00:57:32 -0700 Subject: Improvements to static metadata styling, especially for mobile --- app/javascript/styles/accounts.scss | 62 +++++++++++++++++++++++------------- app/views/accounts/_header.html.haml | 4 +-- 2 files changed, 41 insertions(+), 25 deletions(-) (limited to 'app/views/accounts') diff --git a/app/javascript/styles/accounts.scss b/app/javascript/styles/accounts.scss index d346a6bb2..c9caa64bf 100644 --- a/app/javascript/styles/accounts.scss +++ b/app/javascript/styles/accounts.scss @@ -1,10 +1,25 @@ .card { display: flex; + position: relative; background: $ui-base-color; + background-size: cover; + background-position: center; border-radius: 4px 4px 0 0; box-shadow: 0 0 15px rgba($base-shadow-color, 0.2); overflow: hidden; + &::after { + background: linear-gradient(rgba($base-shadow-color, 0.5), rgba($base-shadow-color, 0.8)); + display: block; + content: ""; + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + z-index: 1; + } + @media screen and (max-width: 700px) { border-radius: 0; box-shadow: none; @@ -13,22 +28,9 @@ .details { position: relative; padding: 60px 0 0; - background-size: cover; - background-position: center; text-align: center; flex: auto; - - &::after { - background: linear-gradient(rgba($base-shadow-color, 0.5), rgba($base-shadow-color, 0.8)); - display: block; - content: ""; - position: absolute; - left: 0; - top: 0; - width: 100%; - height: 100%; - z-index: 1; - } + z-index: 2; } .name { @@ -38,8 +40,6 @@ color: $primary-text-color; font-weight: 500; text-align: center; - position: relative; - z-index: 2; text-shadow: 0 0 2px $base-shadow-color; small { @@ -54,8 +54,6 @@ @include avatar-size(120px); margin: 0 auto; margin-bottom: 15px; - position: relative; - z-index: 2; img { @include avatar-radius(); @@ -72,11 +70,9 @@ } .details-counters { - position: relative; display: inline-flex; flex-direction: row; margin: 15px 0; - z-index: 2; } .counter { @@ -124,22 +120,23 @@ } .bio { - position: relative; font-size: 14px; line-height: 18px; margin: 15px 0; padding: 5px 10px; color: $ui-secondary-color; - z-index: 2; } .metadata { + position: relative; + min-width: 180px; max-width: 40%; - background: $ui-base-color; + background: rgba($base-shadow-color, 0.8); color: $primary-text-color; text-align: left; overflow-y: auto; white-space: pre-wrap; + z-index: 3; .metadata-item { border-bottom: 1px $ui-primary-color solid; @@ -173,6 +170,25 @@ } } + + +@media screen and (max-width: 500px) { + + .card { + display: block; + + .metadata { + max-width: none; + background: $base-shadow-color; + border-top: 1px $ui-primary-color solid; + + .metadata-item { + padding: 15px 20px; + } + } + } +} + .pagination { padding: 30px 0; text-align: center; diff --git a/app/views/accounts/_header.html.haml b/app/views/accounts/_header.html.haml index ef6a2bcbe..ed8a6f091 100644 --- a/app/views/accounts/_header.html.haml +++ b/app/views/accounts/_header.html.haml @@ -1,6 +1,6 @@ - processed_bio = FrontmatterHandler.instance.process_bio Formatter.instance.simplified_format account -.card.h-card.p-author - .details{ style: "background-image: url(#{account.header.url(:original)})" } +.card.h-card.p-author{ style: "background-image: url(#{account.header.url(:original)})" } + .details - if user_signed_in? && current_account.id != account.id && !current_account.requested?(account) .controls - if current_account.following?(account) -- cgit From 6610d57f91a5e2a2f862a20eaaca76a5c8efe1e2 Mon Sep 17 00:00:00 2001 From: kibigo! Date: Fri, 6 Oct 2017 22:22:34 -0700 Subject: Basic static metadata styling --- app/javascript/styles/accounts.scss | 25 +++++++++++++++++++++++++ app/views/accounts/_header.html.haml | 8 ++++---- 2 files changed, 29 insertions(+), 4 deletions(-) (limited to 'app/views/accounts') diff --git a/app/javascript/styles/accounts.scss b/app/javascript/styles/accounts.scss index 744650554..b51761de1 100644 --- a/app/javascript/styles/accounts.scss +++ b/app/javascript/styles/accounts.scss @@ -203,6 +203,31 @@ color: $ui-secondary-color; } + .metadata { + margin: 15px 0; + border: thin $ui-base-color solid; + border-collapse: collapse; + padding: 0; + + th { + margin: 0; + border: thin $ui-base-color solid; + padding: 0 5px; + color: $ui-secondary-color; + background: darken($ui-base-color, 8%); + width: 94px; + vertical-align: middle; + } + + td { + margin: 0; + border: thin $ui-base-color solid; + padding: 0 5px; + color: $ui-primary-color; + vertical-align: middle; + } + } + @media screen and (max-width: 480px) { display: block; diff --git a/app/views/accounts/_header.html.haml b/app/views/accounts/_header.html.haml index dcc6661ba..5b504912d 100644 --- a/app/views/accounts/_header.html.haml +++ b/app/views/accounts/_header.html.haml @@ -34,11 +34,11 @@ .bio .account__header__content.p-note.emojify!=processed_bio[:text] - if processed_bio[:metadata].length > 0 - .metadata< + %table.metadata< - processed_bio[:metadata].each do |i| - .metadata-item>< - %b.emojify>!=i[0] - %span.emojify>!=i[1] + %tr.metadata-item>< + %th.emojify>!=i[0] + %td.emojify>!=i[1] .details-counters .counter{ class: active_nav_class(short_account_url(account)) } -- cgit