norm/pleroma-fe
1
0
Fork 0
forked from AkkomaGang/akkoma-fe
Code Issues Pull requests Projects Releases Packages Wiki Activity

updated preview window

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

88
src/components/style_switcher/style_switcher.scss
View file

@ -163,6 +163,74 @@
background-size: cover;
background-position: 50% 50%;
.dummy {
.post {
font-family: var(--postFont);
display: flex;
.content {
flex: 1;
h4 {
margin-bottom: .25em;
}
.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;
@ -178,12 +246,6 @@
flex: 1;
}
}
.checkbox {
display: inline-flex;
align-items: baseline;
margin-right: 1em;
}
.btn {
margin-left: 0;
padding: 0 1em;
@ -191,6 +253,7 @@
min-height: 30px;
}
}
}
.apply-container {
justify-content: center;
@ -259,17 +322,4 @@
margin-left: .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;
}
}
}

56
src/components/style_switcher/style_switcher.vue
View file

@ -60,51 +60,70 @@
<div class="preview-container">
<div class="panel dummy" :style="previewRules">
<div class="panel-heading">
<div class="title">
{{$t('settings.style.preview.header')}}
<span class="badge badge-notification">
99
</span>
</div>
<span class="faint">
{{$t('settings.style.preview.header_faint')}}
</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="post">
<div class="avatar">
( ͡° ͜ʖ ͡°)
</div>
<h4>Content</h4>
<br>
<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(--cRed)" class="icon-cancel"/>
<i style="color: var(--cOrange)" class="icon-star"/>
<i style="color: var(--cRed)" class="icon-cancel"/>
</div>
</div>
</div>
<br>
<br>
<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>
<input :value="$t('settings.style.preview.input')" type="text">
<span class="alert error">
{{$t('settings.style.preview.error')}}
</span>
<input :value="$t('settings.style.preview.input')" type="text">
<br>
<br>
<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>
@ -112,14 +131,7 @@
<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>
</div>

2
src/components/timeline/timeline.vue
View file

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

3
src/i18n/en.json
View file

@ -268,7 +268,8 @@
"header": "Preview of header",
"error": "Example error",
"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.",
"faint_link": "helpful manual",
"fine_print": "Read our {0} to learn nothing useful!",