Merge branch 'develop' of ssh.gitgud.io:lambadalambda/pleroma-fe into feature/reply-navigation

This commit is contained in:
Shpuld Shpuldson 2017-04-14 16:11:09 +03:00
commit ea184f33b0
10 changed files with 119 additions and 16 deletions

View file

@ -2,7 +2,7 @@
> A Qvitter-style frontend for certain GS servers. > A Qvitter-style frontend for certain GS servers.
![screenshot](http://i.imgur.com/3q30Zxt.jpg) ![screenshot](https://my.mixtape.moe/kjzioz.PNG)
# FOR ADMINS # FOR ADMINS

View file

@ -213,13 +213,20 @@ nav {
} }
.main { .main {
flex: 1; flex-basis: 60%;
flex-basis: 65%; flex-grow: 1;
flex-shrink: 1;
} }
.sidebar { .sidebar {
flex: 1; flex: 0;
flex-basis: 35%; flex-basis: 35%;
}
.sidebar-flexer {
flex: 1;
flex-basis: 345px;
width: 365px;
} }
.mobile-shown { .mobile-shown {
@ -238,6 +245,30 @@ nav {
} }
} }
@media all and (min-width: 960px) {
.sidebar {
overflow: hidden;
max-height: 100vh;
width: 350px;
position: fixed;
margin-top: -10px;
.sidebar-container {
height: 96vh;
width: 362px;
padding-top: 10px;
padding-right: 20px;
overflow-x: hidden;
overflow-y: scroll;
}
}
.sidebar-flexer {
max-height: 96vh;
flex-shrink: 0;
flex-grow: 0;
}
}
@media all and (max-width: 959px) { @media all and (max-width: 959px) {
.mobile-hidden { .mobile-hidden {
display: none; display: none;

View file

@ -15,10 +15,14 @@
<button @click="activatePanel('sidebar')">Sidebar</button> <button @click="activatePanel('sidebar')">Sidebar</button>
<button @click="activatePanel('timeline')">Timeline</button> <button @click="activatePanel('timeline')">Timeline</button>
</div> </div>
<div class="sidebar" :class="{ 'mobile-hidden': mobileActivePanel != 'sidebar' }"> <div class="sidebar-flexer" :class="{ 'mobile-hidden': mobileActivePanel != 'sidebar'}">
<user-panel></user-panel> <div class="sidebar" :class="{ 'mobile-hidden': mobileActivePanel != 'sidebar' }">
<nav-panel></nav-panel> <div class="sidebar-container">
<notifications v-if="currentUser"></notifications> <user-panel></user-panel>
<nav-panel></nav-panel>
<notifications v-if="currentUser"></notifications>
</div>
</div>
</div> </div>
<div class="main" :class="{ 'mobile-hidden': mobileActivePanel != 'timeline' }"> <div class="main" :class="{ 'mobile-hidden': mobileActivePanel != 'timeline' }">
<transition name="fade"> <transition name="fade">

View file

@ -33,10 +33,10 @@
.attachments { .attachments {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
margin-right: -0.8em; margin-right: -0.7em;
.attachment { .attachment {
flex: 1 0 30%; flex: 1 0 30%;
margin: 0.5em 0.8em 0.6em 0.0em; margin: 0.5em 0.7em 0.6em 0.0em;
align-self: flex-start; align-self: flex-start;
&.html { &.html {

View file

@ -1,6 +1,8 @@
@import '../../_variables.scss'; @import '../../_variables.scss';
.notifications { .notifications {
// a bit of a hack to allow scrolling below notifications
padding-bottom: 15em;
.panel-heading { .panel-heading {
// force the text to stay centered, while keeping // force the text to stay centered, while keeping

View file

@ -79,9 +79,8 @@
return this.$store.state.users.currentUser return this.$store.state.users.currentUser
}, },
dailyAvg () { dailyAvg () {
return Math.round( const days = Math.ceil((new Date() - new Date(this.user.created_at)) / (60 * 60 * 24 * 1000))
this.user.statuses_count / ((new Date() - new Date(this.user.created_at)) / (60 * 60 * 24 * 1000)) return Math.round(this.user.statuses_count / days)
)
} }
}, },
methods: { methods: {
@ -117,7 +116,6 @@
} }
.profile-panel-body { .profile-panel-body {
padding-top: 0em;
top: -0em; top: -0em;
padding-top: 4em; padding-top: 4em;
} }

View file

@ -1,6 +1,6 @@
{ {
"name": "Pleroma FE", "name": "Pleroma FE",
"theme": "base16-ashes.css", "theme": "base16-pleroma-dark.css",
"background": "/static/bg.jpg", "background": "/static/bg.jpg",
"logo": "/static/logo.png" "logo": "/static/logo.png"
} }

View file

@ -0,0 +1,33 @@
.base00-background { background-color: #161c20; }
.base01-background { background-color: #282e32; }
.base02-background { background-color: #343a3f; }
.base03-background { background-color: #4e5256; }
.base04-background { background-color: #ababab; }
.base05-background { background-color: #b9b9b9; }
.base06-background { background-color: #d0d0d0; }
.base07-background { background-color: #e7e7e7; }
.base08-background { background-color: #baaa9c; }
.base09-background { background-color: #999999; }
.base0A-background { background-color: #a0a0a0; }
.base0B-background { background-color: #8e8e8e; }
.base0C-background { background-color: #868686; }
.base0D-background { background-color: #686868; }
.base0E-background { background-color: #747474; }
.base0F-background { background-color: #5e5e5e; }
.base00 { color: #161c20; }
.base01 { color: #282e32; }
.base02 { color: #36393e; }
.base03 { color: #4e5256; }
.base04 { color: #ababab; }
.base05 { color: #b9b9b9; }
.base06 { color: #d0d0d0; }
.base07 { color: #e7e7e7; }
.base08 { color: #baaa9c; }
.base09 { color: #999999; }
.base0A { color: #a0a0a0; }
.base0B { color: #8e8e8e; }
.base0C { color: #868686; }
.base0D { color: #686868; }
.base0E { color: #747474; }
.base0F { color: #5e5e5e; }

View file

@ -0,0 +1,33 @@
.base00-background { background-color: #f2f4f6; }
.base01-background { background-color: #dde2e6; }
.base02-background { background-color: #c0c6cb; }
.base03-background { background-color: #a4a4a4; }
.base04-background { background-color: #545454; }
.base05-background { background-color: #304055; }
.base06-background { background-color: #040404; }
.base07-background { background-color: #000000; }
.base08-background { background-color: #e92f2f; }
.base09-background { background-color: #e09448; }
.base0A-background { background-color: #dddd13; }
.base0B-background { background-color: #0ed839; }
.base0C-background { background-color: #23edda; }
.base0D-background { background-color: #3b48e3; }
.base0E-background { background-color: #f996e2; }
.base0F-background { background-color: #69542d; }
.base00 { color: #f2f4f6; }
.base01 { color: #dde2e6; }
.base02 { color: #c0c6cb; }
.base03 { color: #a4a4a4; }
.base04 { color: #545454; }
.base05 { color: #304055; }
.base06 { color: #040404; }
.base07 { color: #000000; }
.base08 { color: #e46f0f; }
.base09 { color: #e09448; }
.base0A { color: #dddd13; }
.base0B { color: #0ed839; }
.base0C { color: #23edda; }
.base0D { color: #3b48e3; }
.base0E { color: #f996e2; }
.base0F { color: #69542d; }

View file

@ -1,4 +1,6 @@
[ [
"base16-pleroma-dark.css",
"base16-pleroma-light.css",
"base16-3024.css", "base16-3024.css",
"base16-apathy.css", "base16-apathy.css",
"base16-ashes.css", "base16-ashes.css",