From e0e507348cc22054e55e2be8fa6544845f597610 Mon Sep 17 00:00:00 2001 From: shpuld Date: Fri, 24 Feb 2017 10:17:41 +0200 Subject: [PATCH 1/6] Give buttons cursor: pointer; Make border radii more consistent by not using em everywhere. --- src/App.scss | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/src/App.scss b/src/App.scss index b0888ac7b2..1e38275e39 100644 --- a/src/App.scss +++ b/src/App.scss @@ -32,6 +32,7 @@ a { button{ border: none; border-radius: 5px; + cursor: pointer; &:hover { background-color: white; @@ -102,11 +103,11 @@ main-router { flex-direction: column; margin: 0.5em; - border-radius: 0.5em; + border-radius: 10px; } .panel-heading { - border-radius: 0.5em 0.5em 0 0; + border-radius: 10px 10px 0 0; background-size: cover; padding: 0.6em 0; text-align: center; @@ -115,7 +116,7 @@ main-router { } .panel-footer { - border-radius: 0 0 0.5em 0.5em; + border-radius: 0 0 10px 10px; } .panel-body > p { @@ -128,7 +129,7 @@ main-router { #content { margin: auto; max-width: 980px; - border-radius: 1em; + border-radius: 10px; padding-bottom: 1em; background-color: rgba(0,0,0,0.1); } From 9dfcf8a301c37b359cf18880732ad63b413ce63e Mon Sep 17 00:00:00 2001 From: shpuld Date: Fri, 24 Feb 2017 17:32:41 +0200 Subject: [PATCH 2/6] Align attachments with usercard, make buttons use theme colors, prettify login form, more border radii adjustment for consistency. --- src/App.scss | 5 +++-- src/components/attachment/attachment.vue | 13 ++++++----- src/components/login_form/login_form.vue | 22 +++++++++++++++++-- .../notifications/notifications.scss | 4 ++++ .../notifications/notifications.vue | 2 +- .../post_status_form/post_status_form.vue | 13 ++++++----- src/components/status/status.vue | 3 ++- .../user_card_content/user_card_content.vue | 13 +++++------ 8 files changed, 50 insertions(+), 25 deletions(-) diff --git a/src/App.scss b/src/App.scss index 1e38275e39..75f825ee25 100644 --- a/src/App.scss +++ b/src/App.scss @@ -35,7 +35,8 @@ button{ cursor: pointer; &:hover { - background-color: white; + //background-color: white; + opacity: 0.8; } } @@ -175,7 +176,7 @@ status-text-container { margin-top: 0.2em; float: right; margin-right: 0.3em; - border-radius: 20%; + border-radius: 5px; } } diff --git a/src/components/attachment/attachment.vue b/src/components/attachment/attachment.vue index 45cc192906..ad60acf9bd 100644 --- a/src/components/attachment/attachment.vue +++ b/src/components/attachment/attachment.vue @@ -34,9 +34,10 @@ .attachments { display: flex; flex-wrap: wrap; + margin-right: -0.8em; .attachment { flex: 1 0 30%; - margin: 0.5em 0.8em 0.6em 0.1em; + margin: 0.5em 0.8em 0.6em 0.0em; align-self: flex-start; &.html { @@ -49,14 +50,14 @@ margin: 10px; padding: 5px; background: rgba(230,230,230,0.6); - border-radius: 0.5em; + border-radius: 5px; font-weight: bold; } video { height: 100%; border: 1px solid; - border-radius: 0.5em; + border-radius: 5px; width: 100%; } @@ -69,7 +70,7 @@ height: 100%; flex: 1; border: 1px solid; - border-radius: 0.5em; + border-radius: 5px; } @@ -89,7 +90,7 @@ flex: 1; img { border: 0px; - border-radius: 0; + border-radius: 5px; height: 100%; object-fit: cover; } @@ -113,7 +114,7 @@ width: 100%; border-style: solid; border-width: 1px; - border-radius: 0.5em; + border-radius: 5px; width: 100%; height: 100%; /* If this isn't here, chrome will stretch the images */ } diff --git a/src/components/login_form/login_form.vue b/src/components/login_form/login_form.vue index c0169a0854..47495a489c 100644 --- a/src/components/login_form/login_form.vue +++ b/src/components/login_form/login_form.vue @@ -5,7 +5,7 @@ Log in
-
+
@@ -15,7 +15,7 @@
- +
@@ -23,3 +23,21 @@ + + diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss index 517afeaad8..fe0cca1041 100644 --- a/src/components/notifications/notifications.scss +++ b/src/components/notifications/notifications.scss @@ -1,4 +1,8 @@ @import '../../_variables.scss'; + +.notifications button { + min-height: 20px; +} .notification { padding: 0.4em 0 0 0.7em; display: flex; diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue index 785cc019f9..36908b1ee7 100644 --- a/src/components/notifications/notifications.vue +++ b/src/components/notifications/notifications.vue @@ -1,7 +1,7 @@