better preview, collateral fixes

This commit is contained in:
Henry Jameson 2018-11-26 03:19:04 +03:00
parent 572c874f5c
commit 9a9dc47fc5
8 changed files with 123 additions and 28 deletions

View File

@ -381,6 +381,12 @@ main-router {
font-size: 1.3em;
}
.faint {
background-color: transparent;
color: $fallback--faint;
color: var(--panelFaint, $fallback--faint);
}
.alert {
white-space: nowrap;
text-overflow: ellipsis;
@ -509,6 +515,27 @@ nav {
flex-grow: 0;
}
}
.badge {
display: inline-block;
border-radius: 99px;
min-width: 22px;
max-width: 22px;
min-height: 22px;
max-height: 22px;
font-size: 15px;
line-height: 22px;
text-align: center;
vertical-align: middle;
white-space: nowrap;
padding: 0;
&.badge-notification {
background-color: $fallback--cRed;
background-color: var(--badgeNotification, $fallback--cRed);
color: white;
color: var(--badgeNotificationText, white);
}
}
.alert {
margin: 0.35em;

View File

@ -4,23 +4,6 @@
// a bit of a hack to allow scrolling below notifications
padding-bottom: 15em;
.unseen-count {
display: inline-block;
background-color: $fallback--cRed;
background-color: var(--badgeNotification, $fallback--cRed);
border-radius: 99px;
min-width: 22px;
max-width: 22px;
min-height: 22px;
max-height: 22px;
color: white;
color: var(--badgeNotificationText, white);
font-size: 15px;
line-height: 22px;
text-align: center;
vertical-align: middle
}
.loadmore-error {
color: $fallback--text;
color: var(--text, $fallback--text);

View File

@ -4,7 +4,7 @@
<div class="panel-heading">
<div class="title">
{{$t('notifications.notifications')}}
<span class="unseen-count" v-if="unseenCount">{{unseenCount}}</span>
<span class="badge badge-notification unseen-count" v-if="unseenCount">{{unseenCount}}</span>
</div>
<div @click.prevent class="loadmore-error alert error" v-if="error">
{{$t('timeline.error_fetching')}}

View File

@ -471,6 +471,7 @@
.avatar {
width: 48px;
height: 48px;
box-shadow: var(--avatarStatusShadow);
border-radius: $fallback--avatarRadius;
border-radius: var(--avatarRadius, $fallback--avatarRadius);
overflow: hidden;

View File

@ -163,11 +163,32 @@
background-size: cover;
background-position: 50% 50%;
.separator {
margin: 1em;
border-bottom: 1px solid;
border-color: $fallback--border;
border-color: var(--border, $fallback--border);
}
.panel-heading {
.badge, .alert, .btn, .faint {
margin-left: 1em;
}
.flex-spacer {
flex: 1;
}
}
.checkbox {
display: inline-flex;
align-items: baseline;
margin-right: 1em;
}
.btn {
margin-left: 0;
margin-top: 1em;
padding: 0 1em;
min-width: 3em;
min-height: 30px;
width: 10em;
}
}

View File

@ -46,27 +46,80 @@
v-model="keepRoundness">
<label for="keep-roundness">{{$t('settings.style.switcher.keep_roundness')}}</label>
</span>
<span>
<input
id="keep-fonts"
type="checkbox"
v-model="keepFonts">
<label for="keep-fonts">{{$t('settings.style.switcher.keep_fonts')}}</label>
</span>
<p>{{$t('settings.style.switcher.save_load_hint')}}</p>
</div>
</div>
<div class="preview-container">
<div class="panel dummy" :style="previewRules">
<div class="panel-heading">Preview</div>
<div class="panel-heading">
{{$t('settings.style.preview.header')}}
<span class="badge badge-notification">
99
</span>
<span class="alert error">
{{$t('settings.style.preview.error')}}
</span>
<button class="btn">
{{$t('settings.style.preview.button')}}
</button>
<span class="flex-spacer"/>
<span class="faint">
{{$t('settings.style.preview.header_faint')}}
</span>
</div>
<div class="panel-body theme-preview-content">
<div class="avatar">
( ͡° ͜ʖ ͡°)
</div>
<h4>Content</h4>
<br>
A bunch of more content and
<a style="color: var(--link)">a nice lil' link</a>
<i18n path="settings.style.preview.text">
<a style="color: var(--link)">
{{$t('settings.style.preview.link')}}
</a>
</i18n>
<i style="color: var(--cBlue)" class="icon-reply"/>
<i style="color: var(--cGreen)" class="icon-retweet"/>
<i style="color: var(--cRed)" class="icon-cancel"/>
<i style="color: var(--cOrange)" class="icon-star"/>
<br>
<button class="btn">Button</button>
<br>
<input :value="$t('settings.style.preview.error')" type="text">
<span class="alert error">
{{$t('settings.style.preview.error')}}
</span>
<br>
<br>
<span class="checkbox">
<input checked="very yes" type="checkbox" id="preview_checkbox">
<label for="preview_checkbox">{{$t('settings.style.preview.checkbox')}}</label>
</span>
<button class="btn">
{{$t('settings.style.preview.button')}}
</button>
<div class="separator"></div>
<i18n path="settings.style.preview.fine_print" tag="span" class="faint">
<a style="color: var(--faintLink)">
{{$t('settings.style.preview.faint_link')}}
</a>
</i18n>
</div>
</div>
</div>

View File

@ -58,10 +58,7 @@
.timeline {
.loadmore-text {
opacity: 0.8;
background-color: transparent;
color: $fallback--faint;
color: var(--panelFaint, $fallback--faint);
opacity: 1;
}
}

View File

@ -170,6 +170,7 @@
"keep_shadows": "Keep shadows",
"keep_opacity": "Keep opacity",
"keep_roundness": "Keep roundness",
"keep_fonts": "Keep fonts",
"save_load_hint": "\"Keep\" options preserve currently set options when selecting or loading themes, it also stores said options when exporting a theme.",
"reset": "Reset",
"clear_all": "Clear all",
@ -250,6 +251,18 @@
"size": "Size (in px)",
"weight": "Weight (boldness)",
"custom": "Custom"
},
"preview": {
"header": "Preview of header",
"error": "Example error",
"button": "Button",
"text": "A bunch of more content and {0}",
"input": "Just landed in L.A.",
"faint_link": "helpful manual",
"fine_print": "Read our {0} to learn nothing useful!",
"header_faint": "This is fine",
"checkbox": "I have skimmed over terms and conditions",
"link": "a nice lil' link"
}
}
},