forked from AkkomaGang/akkoma-fe
Merge branch 'develop' into feature/hash-routed
This commit is contained in:
commit
224fe580ca
19 changed files with 121 additions and 70 deletions
|
@ -5,6 +5,7 @@
|
||||||
<title>Pleroma</title>
|
<title>Pleroma</title>
|
||||||
<link rel="stylesheet" href="/static/font/css/fontello.css">
|
<link rel="stylesheet" href="/static/font/css/fontello.css">
|
||||||
<link rel="stylesheet" href="/static/font/css/animation.css">
|
<link rel="stylesheet" href="/static/font/css/animation.css">
|
||||||
|
<link rel="stylesheet" href="/static/css/solarized-light.css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="app"></div>
|
<div id="app"></div>
|
||||||
|
|
39
src/App.scss
39
src/App.scss
|
@ -1,6 +1,5 @@
|
||||||
@import './_variables.scss';
|
@import './_variables.scss';
|
||||||
#app {
|
#app {
|
||||||
background-color: $main-color;
|
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
background-attachment: fixed;
|
background-attachment: fixed;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
|
@ -28,7 +27,6 @@ body {
|
||||||
|
|
||||||
a {
|
a {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
color: $main-color;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
|
@ -55,7 +53,6 @@ a {
|
||||||
}
|
}
|
||||||
|
|
||||||
nav {
|
nav {
|
||||||
background: black;
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
|
@ -72,27 +69,6 @@ main-router {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.status:hover {
|
|
||||||
background-color: $darkened-background;
|
|
||||||
}
|
|
||||||
|
|
||||||
.new-status-notification {
|
|
||||||
font-size: 1.1em;
|
|
||||||
background-color: $darkened-background;
|
|
||||||
border-bottom-color: darken($darkened-background, 5%);
|
|
||||||
border-bottom-style: solid;
|
|
||||||
border-bottom-width: 1px;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background-color: darken($darkened-background, 5%);
|
|
||||||
}
|
|
||||||
|
|
||||||
p {
|
|
||||||
margin: 0px;
|
|
||||||
padding: 10px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.status.compact {
|
.status.compact {
|
||||||
color: rgba(0, 0, 0, 0.42);
|
color: rgba(0, 0, 0, 0.42);
|
||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
|
@ -108,7 +84,6 @@ main-router {
|
||||||
.panel {
|
.panel {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
background-color: $main-background;
|
|
||||||
margin: 0.5em;
|
margin: 0.5em;
|
||||||
|
|
||||||
border-radius: 0.5em;
|
border-radius: 0.5em;
|
||||||
|
@ -117,7 +92,6 @@ main-router {
|
||||||
.panel-heading {
|
.panel-heading {
|
||||||
border-radius: 0.5em 0.5em 0 0;
|
border-radius: 0.5em 0.5em 0 0;
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
background-color: bisque;
|
|
||||||
padding-top: 0.3em;
|
padding-top: 0.3em;
|
||||||
padding-bottom: 0.3em;
|
padding-bottom: 0.3em;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
@ -125,12 +99,12 @@ main-router {
|
||||||
}
|
}
|
||||||
|
|
||||||
.panel-footer {
|
.panel-footer {
|
||||||
background-color: bisque;
|
|
||||||
border-radius: 0 0 0.5em 0.5em;
|
border-radius: 0 0 0.5em 0.5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.panel-body > p {
|
.panel-body > p {
|
||||||
margin: 1em;
|
padding: 1em;
|
||||||
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@ -176,10 +150,6 @@ main-router {
|
||||||
font-weight: lighter;
|
font-weight: lighter;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
span {
|
|
||||||
color: $main-color;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.fa {
|
.fa {
|
||||||
|
@ -200,17 +170,12 @@ status-text-container {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
attention {
|
|
||||||
color: $main-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
.status-el {
|
.status-el {
|
||||||
line-height: 18px;
|
line-height: 18px;
|
||||||
|
|
||||||
.notify {
|
.notify {
|
||||||
.avatar {
|
.avatar {
|
||||||
border-width: 3px;
|
border-width: 3px;
|
||||||
border-color: $main-color;
|
|
||||||
border-style: solid;
|
border-style: solid;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<div id="app" v-bind:style="style">
|
<div id="app" v-bind:style="style" class="base02-background">
|
||||||
<nav class='container'>
|
<nav class='container base01-background base04'>
|
||||||
<div class='item'>
|
<div class='item'>
|
||||||
<a route-to='friends-timeline' href="#">Pleroma FE</a>
|
<a route-to='friends-timeline' href="#">Pleroma FE</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -9,7 +9,7 @@
|
||||||
|
|
||||||
<a class="image-attachment" v-if="type === 'image' && !hidden"
|
<a class="image-attachment" v-if="type === 'image' && !hidden"
|
||||||
:href="attachment.url" target="_blank">
|
:href="attachment.url" target="_blank">
|
||||||
<img referrerpolicy="no-referrer" :src="attachment.url"></img>
|
<img class="base05-border" referrerpolicy="no-referrer" :src="attachment.url"></img>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<video v-if="type === 'video' && !hidden" :src="attachment.url" controls></video>
|
<video v-if="type === 'video' && !hidden" :src="attachment.url" controls></video>
|
||||||
|
@ -97,10 +97,6 @@
|
||||||
h1 {
|
h1 {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
margin: 0px;
|
margin: 0px;
|
||||||
|
|
||||||
a {
|
|
||||||
color: black;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -111,7 +107,8 @@
|
||||||
|
|
||||||
img {
|
img {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
border: 1px solid;
|
border-style: solid;
|
||||||
|
border-width: 1px;
|
||||||
border-radius: 0.5em;
|
border-radius: 0.5em;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%; /* If this isn't here, chrome will stretch the images */
|
height: 100%; /* If this isn't here, chrome will stretch the images */
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="timeline panel panel-default">
|
<div class="timeline panel panel-default base00-background">
|
||||||
<div class="panel-heading">Status</div>
|
<div class="panel-heading base01-background base04">Status</div>
|
||||||
<div class="panel-body">
|
<div class="panel-body">
|
||||||
<div class="timeline">
|
<div class="timeline">
|
||||||
<status v-for="status in conversation" :key="status.id" v-bind:statusoid="status"></status>
|
<status v-for="status in conversation" :key="status.id" v-bind:statusoid="status"></status>
|
||||||
|
|
|
@ -8,14 +8,13 @@
|
||||||
<script src="./favorite_button.js" ></script>
|
<script src="./favorite_button.js" ></script>
|
||||||
|
|
||||||
<style lang='scss'>
|
<style lang='scss'>
|
||||||
@import '../../_variables.scss';
|
|
||||||
.favorite-button {
|
.favorite-button {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
&:hover {
|
&:hover {
|
||||||
color: $main-color;
|
color: orange;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.icon-star {
|
.icon-star {
|
||||||
color: $main-color;
|
color: orange;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="timeline panel panel-default">
|
<div class="timeline panel panel-default base00-background">
|
||||||
<div class="panel-heading">Friends Timeline</div>
|
<div class="panel-heading base01-background base04">Friends Timeline</div>
|
||||||
<div class="panel-body">
|
<div class="panel-body">
|
||||||
<Timeline v-bind:timeline="timeline" v-bind:timeline-name="'friends'"/>
|
<Timeline v-bind:timeline="timeline" v-bind:timeline-name="'friends'"/>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="login panel panel-default">
|
<div class="login panel panel-default base00-background">
|
||||||
<!-- Default panel contents -->
|
<!-- Default panel contents -->
|
||||||
<div class="panel-heading">
|
<div class="panel-heading base01-background base04">
|
||||||
Log in
|
Log in
|
||||||
</div>
|
</div>
|
||||||
<div class="panel-body">
|
<div class="panel-body">
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="timeline panel panel-default">
|
<div class="timeline panel panel-default base00-background">
|
||||||
<div class="panel-heading">Mentions</div>
|
<div class="panel-heading base01-background base04">Mentions</div>
|
||||||
<div class="panel-body">
|
<div class="panel-body">
|
||||||
<Timeline v-bind:timeline="timeline" v-bind:timeline-name="'mentions'"/>
|
<Timeline v-bind:timeline="timeline" v-bind:timeline-name="'mentions'"/>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="nav-panel">
|
<div class="nav-panel">
|
||||||
<div class="panel panel-default">
|
<div class="panel panel-default base01-background">
|
||||||
<ul>
|
<ul>
|
||||||
<li v-if='currentUser'>
|
<li v-if='currentUser'>
|
||||||
<router-link to='/main/friends'>
|
<router-link to='/main/friends'>
|
||||||
|
@ -38,7 +38,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-panel li {
|
.nav-panel li {
|
||||||
border-bottom: 1px solid silver;
|
border-bottom: 1px solid;
|
||||||
padding: 0.5em;
|
padding: 0.5em;
|
||||||
padding-left: 1em;
|
padding-left: 1em;
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="notifications">
|
<div class="notifications">
|
||||||
<div class="panel panel-default">
|
<div class="panel panel-default base00-background">
|
||||||
<div class="panel-heading">Notifications ({{visibleNotifications.length}})</div>
|
<div class="panel-heading base01-background base04">Notifications ({{visibleNotifications.length}})</div>
|
||||||
<div class="panel-body">
|
<div class="panel-body">
|
||||||
<div v-for="notification in visibleNotifications" class="notification">
|
<div v-for="notification in visibleNotifications" class="notification">
|
||||||
<a :href="notification.action.user.statusnet_profile_url">
|
<a :href="notification.action.user.statusnet_profile_url">
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="timeline panel panel-default">
|
<div class="timeline panel panel-default base00-background">
|
||||||
<div class="panel-heading">THE WHOLE KNOWN NETWORK</div>
|
<div class="panel-heading base01-background base04">THE WHOLE KNOWN NETWORK</div>
|
||||||
<div class="panel-body">
|
<div class="panel-body">
|
||||||
<Timeline v-bind:timeline="timeline" v-bind:timeline-name="'publicAndExternal'"/>
|
<Timeline v-bind:timeline="timeline" v-bind:timeline-name="'publicAndExternal'"/>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="timeline panel panel-default">
|
<div class="timeline panel panel-default base00-background">
|
||||||
<div class="panel-heading">Public Timeline</div>
|
<div class="panel-heading base01-background base04">Public Timeline</div>
|
||||||
<div class="panel-body">
|
<div class="panel-body">
|
||||||
<Timeline v-bind:timeline="timeline" v-bind:timeline-name="'public'"/>
|
<Timeline v-bind:timeline="timeline" v-bind:timeline-name="'public'"/>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -120,10 +120,10 @@
|
||||||
.status {
|
.status {
|
||||||
padding: 0.5em;
|
padding: 0.5em;
|
||||||
padding-right: 1em;
|
padding-right: 1em;
|
||||||
border-bottom: 1px solid silver;
|
border-bottom: 1px solid;
|
||||||
}
|
}
|
||||||
|
|
||||||
.status-el:last-child .status {
|
.status-el:last-child .status {
|
||||||
border: none
|
border-bottom: none
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="timeline">
|
<div class="timeline">
|
||||||
<a href="#" v-on:click.prevent='showNewStatuses()' v-if="timeline.newStatusCount > 0">
|
<a href="#" v-on:click.prevent='showNewStatuses()' v-if="timeline.newStatusCount > 0">
|
||||||
<div class="new-status-notification">
|
<div class="base01-background base05-border new-status-notification">
|
||||||
<p class="text-center" >
|
<p class="text-center" >
|
||||||
{{timeline.newStatusCount}} new statuses
|
{{timeline.newStatusCount}} new statuses
|
||||||
</p>
|
</p>
|
||||||
|
@ -9,7 +9,7 @@
|
||||||
</a>
|
</a>
|
||||||
<status v-for="status in timeline.visibleStatuses" :key="status.id" v-bind:statusoid="status"></status>
|
<status v-for="status in timeline.visibleStatuses" :key="status.id" v-bind:statusoid="status"></status>
|
||||||
<a href="#" v-on:click.prevent='fetchOlderStatuses()' v-if="!timeline.loading">
|
<a href="#" v-on:click.prevent='fetchOlderStatuses()' v-if="!timeline.loading">
|
||||||
<div class="new-status-notification">
|
<div class="base01-background base05-border new-status-notification">
|
||||||
<p class="text-center" >
|
<p class="text-center" >
|
||||||
Load older statuses.
|
Load older statuses.
|
||||||
</p>
|
</p>
|
||||||
|
@ -18,3 +18,16 @@
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script src="./timeline.js"></script>
|
<script src="./timeline.js"></script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.new-status-notification {
|
||||||
|
border-style: solid;
|
||||||
|
border-width: 1px 0 1px 0;
|
||||||
|
font-size: 1.1em;
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin: 0px;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
|
@ -26,7 +26,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="panel-body">
|
<div class="panel-body base00-background">
|
||||||
<div class="user-counts">
|
<div class="user-counts">
|
||||||
<div class="user-count">
|
<div class="user-count">
|
||||||
<h5>Statuses</h5>
|
<h5>Statuses</h5>
|
||||||
|
|
|
@ -4,7 +4,7 @@
|
||||||
|
|
||||||
<user-card-content :user="user"></user-card-content>
|
<user-card-content :user="user"></user-card-content>
|
||||||
|
|
||||||
<div class="panel-footer">
|
<div class="panel-footer base00-background">
|
||||||
<post-status-form v-if='user'></post-status-form>
|
<post-status-form v-if='user'></post-status-form>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
38
static/css/solarized-dark.css
Normal file
38
static/css/solarized-dark.css
Normal file
|
@ -0,0 +1,38 @@
|
||||||
|
.base00-background { background-color: #002b36; }
|
||||||
|
.base01-background { background-color: #073642; }
|
||||||
|
.base02-background { background-color: #586e75; }
|
||||||
|
.base03-background { background-color: #657b83; }
|
||||||
|
.base04-background { background-color: #839496; }
|
||||||
|
.base05-background { background-color: #93a1a1; }
|
||||||
|
.base06-background { background-color: #eee8d5; }
|
||||||
|
.base07-background { background-color: #fdf6e3; }
|
||||||
|
.base08-background { background-color: #dc322f; }
|
||||||
|
.base09-background { background-color: #cb4b16; }
|
||||||
|
.base0A-background { background-color: #b58900; }
|
||||||
|
.base0B-background { background-color: #859900; }
|
||||||
|
.base0C-background { background-color: #2aa198; }
|
||||||
|
.base0D-background { background-color: #268bd2; }
|
||||||
|
.base0E-background { background-color: #6c71c4; }
|
||||||
|
.base0F-background { background-color: #d33682; }
|
||||||
|
|
||||||
|
.base00 { color: #002b36; }
|
||||||
|
.base01 { color: #073642; }
|
||||||
|
.base02 { color: #586e75; }
|
||||||
|
.base03 { color: #657b83; }
|
||||||
|
.base04 { color: #839496; }
|
||||||
|
.base05 { color: #93a1a1; }
|
||||||
|
.base06 { color: #eee8d5; }
|
||||||
|
.base07 { color: #fdf6e3; }
|
||||||
|
.base08 { color: #dc322f; }
|
||||||
|
.base09 { color: #cb4b16; }
|
||||||
|
.base0A { color: #b58900; }
|
||||||
|
.base0B { color: #859900; }
|
||||||
|
.base0C { color: #2aa198; }
|
||||||
|
.base0D { color: #268bd2; }
|
||||||
|
.base0E { color: #6c71c4; }
|
||||||
|
.base0F { color: #d33682; }
|
||||||
|
|
||||||
|
.base05-border { border-color: #93a1a1; }
|
||||||
|
|
||||||
|
a { color: #dc322f; } /* base08 */
|
||||||
|
body { color: #93a1a1; } /* base05 */
|
38
static/css/solarized-light.css
Normal file
38
static/css/solarized-light.css
Normal file
|
@ -0,0 +1,38 @@
|
||||||
|
.base00-background { background-color: #fdf6e3; }
|
||||||
|
.base01-background { background-color: #eee8d5; }
|
||||||
|
.base02-background { background-color: #93a1a1; }
|
||||||
|
.base03-background { background-color: #839496; }
|
||||||
|
.base04-background { background-color: #657b83; }
|
||||||
|
.base05-background { background-color: #586e75; }
|
||||||
|
.base06-background { background-color: #073642; }
|
||||||
|
.base07-background { background-color: #002b36; }
|
||||||
|
.base08-background { background-color: #dc322f; }
|
||||||
|
.base09-background { background-color: #cb4b16; }
|
||||||
|
.base0A-background { background-color: #b58900; }
|
||||||
|
.base0B-background { background-color: #859900; }
|
||||||
|
.base0C-background { background-color: #2aa198; }
|
||||||
|
.base0D-background { background-color: #268bd2; }
|
||||||
|
.base0E-background { background-color: #6c71c4; }
|
||||||
|
.base0F-background { background-color: #d33682; }
|
||||||
|
|
||||||
|
.base00 { color: #fdf6e3; }
|
||||||
|
.base01 { color: #eee8d5; }
|
||||||
|
.base02 { color: #93a1a1; }
|
||||||
|
.base03 { color: #839496; }
|
||||||
|
.base04 { color: #657b83; }
|
||||||
|
.base05 { color: #586e75; }
|
||||||
|
.base06 { color: #073642; }
|
||||||
|
.base07 { color: #002b36; }
|
||||||
|
.base08 { color: #dc322f; }
|
||||||
|
.base09 { color: #cb4b16; }
|
||||||
|
.base0A { color: #b58900; }
|
||||||
|
.base0B { color: #859900; }
|
||||||
|
.base0C { color: #2aa198; }
|
||||||
|
.base0D { color: #268bd2; }
|
||||||
|
.base0E { color: #6c71c4; }
|
||||||
|
.base0F { color: #d33682; }
|
||||||
|
|
||||||
|
.base05-border { color: #586e75; }
|
||||||
|
|
||||||
|
a { color: #dc322f; } /* base08 */
|
||||||
|
body { color: #586e75; } /* base05 */
|
Loading…
Reference in a new issue