updated preview window

This commit is contained in:
Henry Jameson 2018-11-27 04:54:59 +03:00
parent f8e17cbdc5
commit b45fc6c652
4 changed files with 150 additions and 87 deletions

View File

@ -163,32 +163,95 @@
background-size: cover; background-size: cover;
background-position: 50% 50%; background-position: 50% 50%;
.separator { .dummy {
margin: 1em; .post {
border-bottom: 1px solid; font-family: var(--postFont);
border-color: $fallback--border; display: flex;
border-color: var(--border, $fallback--border);
}
.panel-heading { .content {
.badge, .alert, .btn, .faint { flex: 1;
margin-left: 1em;
}
.flex-spacer {
flex: 1;
}
}
.checkbox {
display: inline-flex;
align-items: baseline;
margin-right: 1em;
}
.btn { h4 {
margin-left: 0; margin-bottom: .25em;
padding: 0 1em; }
min-width: 3em;
min-height: 30px; .icons {
margin-top: .5em;
display: flex;
i {
margin-right: 1em;
}
}
}
}
.after-post {
margin-top: 1em;
display: flex;
align-items: center;
}
.avatar, .avatar-alt{
background: linear-gradient(135deg, #b8e1fc 0%,#a9d2f3 10%,#90bae4 25%,#90bcea 37%,#90bff0 50%,#6ba8e5 51%,#a2daf5 83%,#bdf3fd 100%);
color: black;
font-family: sans-serif;
text-align: center;
margin-right: 1em;
}
.avatar-alt {
flex: 0 auto;
margin-left: 28px;
font-size: 12px;
width: 20px;
height: 20px;
line-height: 20px;
border-radius: $fallback--avatarAltRadius;
border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
}
.avatar {
flex: 0 auto;
width: 48px;
height: 48px;
font-size: 14px;
line-height: 48px;
}
.actions {
display: flex;
align-items: baseline;
.checkbox {
display: inline-flex;
align-items: baseline;
margin-right: 1em;
flex: 1;
}
}
.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;
}
}
.btn {
margin-left: 0;
padding: 0 1em;
min-width: 3em;
min-height: 30px;
}
} }
} }
@ -259,17 +322,4 @@
margin-left: .25em; margin-left: .25em;
margin-right: .25em; margin-right: .25em;
} }
.dummy {
.avatar {
background: linear-gradient(135deg, #b8e1fc 0%,#a9d2f3 10%,#90bae4 25%,#90bcea 37%,#90bff0 50%,#6ba8e5 51%,#a2daf5 83%,#bdf3fd 100%);
color: black;
text-align: center;
height: 48px;
line-height: 48px;
width: 48px;
float: left;
margin-right: 1em;
}
}
} }

View File

@ -60,66 +60,78 @@
<div class="preview-container"> <div class="preview-container">
<div class="panel dummy" :style="previewRules"> <div class="panel dummy" :style="previewRules">
<div class="panel-heading"> <div class="panel-heading">
{{$t('settings.style.preview.header')}} <div class="title">
<span class="badge badge-notification"> {{$t('settings.style.preview.header')}}
99 <span class="badge badge-notification">
</span> 99
<span class="alert error"> </span>
{{$t('settings.style.preview.error')}} </div>
</span>
<button class="btn">
{{$t('settings.style.preview.button')}}
</button>
<span class="flex-spacer"/>
<span class="faint"> <span class="faint">
{{$t('settings.style.preview.header_faint')}} {{$t('settings.style.preview.header_faint')}}
</span> </span>
</div>
<div class="panel-body theme-preview-content">
<div class="avatar">
( ͡° ͜ʖ ͡°)
</div>
<h4>Content</h4>
<br>
<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>
<br>
<input :value="$t('settings.style.preview.input')" type="text">
<span class="alert error"> <span class="alert error">
{{$t('settings.style.preview.error')}} {{$t('settings.style.preview.error')}}
</span> </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"> <button class="btn">
{{$t('settings.style.preview.button')}} {{$t('settings.style.preview.button')}}
</button> </button>
</div>
<div class="panel-body theme-preview-content">
<div class="post">
<div class="avatar">
( ͡° ͜ʖ ͡°)
</div>
<div class="content">
<h4>
Content
</h4>
<i18n path="settings.style.preview.text">
<code style="font-family: var(--postCodeFont)">
{{$t('settings.style.preview.mono')}}
</code>
<a style="color: var(--link)">
{{$t('settings.style.preview.link')}}
</a>
</i18n>
<div class="icons">
<i style="color: var(--cBlue)" class="icon-reply"/>
<i style="color: var(--cGreen)" class="icon-retweet"/>
<i style="color: var(--cOrange)" class="icon-star"/>
<i style="color: var(--cRed)" class="icon-cancel"/>
</div>
</div>
</div>
<div class="after-post">
<div class="avatar-alt">
:^)
</div>
<div class="content">
<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 class="separator"></div> <div class="separator"></div>
<i18n path="settings.style.preview.fine_print" tag="span" class="faint"> <span class="alert error">
<a style="color: var(--faintLink)"> {{$t('settings.style.preview.error')}}
{{$t('settings.style.preview.faint_link')}} </span>
</a> <input :value="$t('settings.style.preview.input')" type="text">
</i18n>
<div class="actions">
<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>
</div> </div>
</div> </div>
</div> </div>

View File

@ -10,7 +10,7 @@
<button @click.prevent="showNewStatuses" class="loadmore-button" v-if="timeline.newStatusCount > 0 && !timelineError"> <button @click.prevent="showNewStatuses" class="loadmore-button" v-if="timeline.newStatusCount > 0 && !timelineError">
{{$t('timeline.show_new')}}{{newStatusCountStr}} {{$t('timeline.show_new')}}{{newStatusCountStr}}
</button> </button>
<div @click.prevent class="loadmore-text" v-if="!timeline.newStatusCount > 0 && !timelineError"> <div @click.prevent class="loadmore-text faint" v-if="!timeline.newStatusCount > 0 && !timelineError">
{{$t('timeline.up_to_date')}} {{$t('timeline.up_to_date')}}
</div> </div>
</div> </div>

View File

@ -268,7 +268,8 @@
"header": "Preview of header", "header": "Preview of header",
"error": "Example error", "error": "Example error",
"button": "Button", "button": "Button",
"text": "A bunch of more content and {0}", "text": "A bunch of more {0} and {1}",
"mono": "content",
"input": "Just landed in L.A.", "input": "Just landed in L.A.",
"faint_link": "helpful manual", "faint_link": "helpful manual",
"fine_print": "Read our {0} to learn nothing useful!", "fine_print": "Read our {0} to learn nothing useful!",