commit: 58a975e8df0d72ea330a6120195cc9bc374d68ad
parent 076c52788b46258078ce2d83fdac82d75692c74b
Author: Henry Jameson <me@hjkos.com>
Date: Wed, 20 Apr 2022 23:22:51 +0300
cleanup and fixes
Diffstat:
16 files changed, 32 insertions(+), 41 deletions(-)
diff --git a/src/App.scss b/src/App.scss
@@ -456,7 +456,7 @@ textarea,
box-sizing: border-box;
display: inline-block;
position: relative;
- height: 28px;
+ height: 2em;
line-height: 16px;
hyphens: none;
padding: 8px 0.5em;
diff --git a/src/components/chat/chat.scss b/src/components/chat/chat.scss
@@ -52,7 +52,7 @@
.go-back-button {
text-align: center;
- line-height: 100%;
+ line-height: 1;
height: 100%;
align-self: start;
width: var(--__panel-heading-height-inner);
diff --git a/src/components/chat_new/chat_new.scss b/src/components/chat_new/chat_new.scss
@@ -22,10 +22,10 @@
}
.go-back-button {
- cursor: pointer;
- width: 28px;
text-align: center;
- padding: 0.6em;
- margin: -0.6em 0.6em -0.6em -0.6em;
+ line-height: 1;
+ height: 100%;
+ align-self: start;
+ width: var(--__panel-heading-height-inner);
}
}
diff --git a/src/components/chat_new/chat_new.vue b/src/components/chat_new/chat_new.vue
@@ -6,15 +6,15 @@
ref="header"
class="panel-heading"
>
- <a
- class="go-back-button"
+ <button
+ class="button-unstyled go-back-button"
@click="goBack"
>
<FAIcon
size="lg"
icon="chevron-left"
/>
- </a>
+ </button>
</div>
<div class="input-wrap">
<div class="input-search">
diff --git a/src/components/login_form/login_form.vue b/src/components/login_form/login_form.vue
@@ -101,7 +101,7 @@
padding: 0.6em;
.btn {
- min-height: 28px;
+ min-height: 2em;
width: 10em;
}
diff --git a/src/components/media_upload/media_upload.vue b/src/components/media_upload/media_upload.vue
@@ -32,6 +32,6 @@
@import '../../_variables.scss';
.media-upload {
- cursor: pointer;
+ cursor: pointer; // We use <label> for interactivity... i wonder if it's fine
}
</style>
diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
@@ -336,7 +336,7 @@
display: flex;
justify-content: space-between;
padding: 0.5em;
- height: 32px;
+ height: 2.5em;
button {
width: 10em;
@@ -411,10 +411,12 @@
}
.media-upload-icon, .poll-icon, .emoji-icon {
- font-size: 26px;
+ font-size: 1.85em;
line-height: 1.1;
flex: 1;
padding: 0 0.1em;
+ display: flex;
+ align-items: center;
&.selected, &:hover {
// needs to be specific to override icon default color
@@ -441,21 +443,17 @@
// Order is not necessary but a good indicator
.media-upload-icon {
order: 1;
- text-align: left;
+ justify-content: left;
}
.emoji-icon {
order: 2;
- text-align: center;
+ justify-content: center;
}
.poll-icon {
order: 3;
- text-align: right;
- }
-
- .poll-icon {
- cursor: pointer;
+ justify-content: right;
}
.error {
@@ -489,10 +487,6 @@
flex-direction: column;
}
- .btn {
- cursor: pointer;
- }
-
.btn[disabled] {
cursor: not-allowed;
}
@@ -551,10 +545,6 @@
}
}
- .btn {
- cursor: pointer;
- }
-
.btn[disabled] {
cursor: not-allowed;
}
diff --git a/src/components/registration/registration.vue b/src/components/registration/registration.vue
@@ -297,8 +297,8 @@ $validations-cRed: #f04124;
.form-group {
display: flex;
flex-direction: column;
- padding: 0.3em 0.0em 0.3em;
- line-height:24px;
+ padding: 0.3em 0;
+ line-height: 2;
margin-bottom: 1em;
}
@@ -344,7 +344,7 @@ $validations-cRed: #f04124;
.btn {
margin-top: 0.6em;
- height: 28px;
+ height: 2em;
}
.error {
diff --git a/src/components/remote_follow/remote_follow.vue b/src/components/remote_follow/remote_follow.vue
@@ -32,7 +32,7 @@
.remote-button {
width: 100%;
- min-height: 28px;
+ min-height: 2em;
}
}
</style>
diff --git a/src/components/select/select.vue b/src/components/select/select.vue
@@ -39,10 +39,10 @@ label.Select {
padding: 0 2em 0 .2em;
font-family: sans-serif;
font-family: var(--inputFont, sans-serif);
- font-size: 14px;
+ font-size: 1em;
width: 100%;
z-index: 1;
- height: 28px;
+ height: 2em;
line-height: 16px;
}
@@ -55,7 +55,7 @@ label.Select {
width: 0.875em;
color: $fallback--text;
color: var(--inputText, $fallback--text);
- line-height: 28px;
+ line-height: 2;
z-index: 0;
pointer-events: none;
}
diff --git a/src/components/settings_modal/settings_modal.scss b/src/components/settings_modal/settings_modal.scss
@@ -54,7 +54,7 @@
overflow-y: hidden;
.btn {
- min-height: 28px;
+ min-height: 2em;
min-width: 10em;
padding: 0 2em;
}
diff --git a/src/components/settings_modal/tabs/mutes_and_blocks_tab.scss b/src/components/settings_modal/tabs/mutes_and_blocks_tab.scss
@@ -8,7 +8,7 @@
.bulk-actions {
text-align: right;
padding: 0 1em;
- min-height: 28px;
+ min-height: 2em;
}
.bulk-action-button {
diff --git a/src/components/settings_modal/tabs/profile_tab.scss b/src/components/settings_modal/tabs/profile_tab.scss
@@ -89,7 +89,7 @@
&-bulk-actions {
text-align: right;
padding: 0 1em;
- min-height: 28px;
+ min-height: 2em;
button {
width: 10em;
diff --git a/src/components/settings_modal/tabs/theme_tab/theme_tab.scss b/src/components/settings_modal/tabs/theme_tab/theme_tab.scss
@@ -325,7 +325,7 @@
.btn {
flex-grow: 1;
- min-height: 28px;
+ min-height: 2em;
min-width: 0;
max-width: 10em;
padding: 0;
diff --git a/src/components/tab_switcher/tab_switcher.scss b/src/components/tab_switcher/tab_switcher.scss
@@ -25,8 +25,9 @@
border-bottom-color: $fallback--border;
border-bottom-color: var(--border, $fallback--border);
}
+
.tab-wrapper {
- height: 28px;
+ height: 2em;
&:not(.active)::after {
left: 0;
diff --git a/src/panel.scss b/src/panel.scss
@@ -176,7 +176,7 @@
flex: none;
padding: 0.6em 0.6em;
text-align: left;
- line-height: 28px;
+ line-height: 2;
align-items: baseline;
border-width: 1px 0 0 0;
border-style: solid;