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

Align attachments with usercard, make buttons use theme colors, prettify login form, more border radii adjustment for consistency.

Browse source
This commit is contained in:
shpuld 2017-02-24 17:32:41 +02:00
parent e0e507348c
commit 9dfcf8a301
8 changed files with 50 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
src/App.scss
View file

@ -35,7 +35,8 @@ button{
cursor: pointer; cursor: pointer;
&:hover { &:hover {
background-color: white; //background-color: white;
opacity: 0.8;
} }
} }
@ -175,7 +176,7 @@ status-text-container {
margin-top: 0.2em; margin-top: 0.2em;
float: right; float: right;
margin-right: 0.3em; margin-right: 0.3em;
border-radius: 20%; border-radius: 5px;
} }
} }

13
src/components/attachment/attachment.vue
View file

@ -34,9 +34,10 @@
.attachments { .attachments {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
margin-right: -0.8em;
.attachment { .attachment {
flex: 1 0 30%; flex: 1 0 30%;
margin: 0.5em 0.8em 0.6em 0.1em; margin: 0.5em 0.8em 0.6em 0.0em;
align-self: flex-start; align-self: flex-start;
&.html { &.html {
@ -49,14 +50,14 @@
margin: 10px; margin: 10px;
padding: 5px; padding: 5px;
background: rgba(230,230,230,0.6); background: rgba(230,230,230,0.6);
border-radius: 0.5em; border-radius: 5px;
font-weight: bold; font-weight: bold;
} }
video { video {
height: 100%; height: 100%;
border: 1px solid; border: 1px solid;
border-radius: 0.5em; border-radius: 5px;
width: 100%; width: 100%;
} }
@ -69,7 +70,7 @@
height: 100%; height: 100%;
flex: 1; flex: 1;
border: 1px solid; border: 1px solid;
border-radius: 0.5em; border-radius: 5px;
} }
@ -89,7 +90,7 @@
flex: 1; flex: 1;
img { img {
border: 0px; border: 0px;
border-radius: 0; border-radius: 5px;
height: 100%; height: 100%;
object-fit: cover; object-fit: cover;
} }
@ -113,7 +114,7 @@
width: 100%; width: 100%;
border-style: solid; border-style: solid;
border-width: 1px; border-width: 1px;
border-radius: 0.5em; border-radius: 5px;
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 */
} }

22
src/components/login_form/login_form.vue
View file

@ -5,7 +5,7 @@
Log in Log in
</div> </div>
<div class="panel-body"> <div class="panel-body">
<form v-on:submit.prevent='submit(user)'> <form v-on:submit.prevent='submit(user)' class='login-form'>
<div class='form-group'> <div class='form-group'>
<label for='username'>Username</label> <label for='username'>Username</label>
<input :disabled="loggingIn" v-model='user.username' class='form-control' id='username' placeholder='e.g. lain'> <input :disabled="loggingIn" v-model='user.username' class='form-control' id='username' placeholder='e.g. lain'>
@ -15,7 +15,7 @@
<input :disabled="loggingIn" v-model='user.password' class='form-control' id='password' type='password'> <input :disabled="loggingIn" v-model='user.password' class='form-control' id='password' type='password'>
</div> </div>
<div class='form-group'> <div class='form-group'>
<button :disabled="loggingIn" type='submit' class='btn btn-default'>Submit</button> <button :disabled="loggingIn" type='submit' class='btn btn-default base05 base01-background'>Submit</button>
</div> </div>
</form> </form>
</div> </div>
@ -23,3 +23,21 @@
</template> </template>
<script src="./login_form.js" ></script> <script src="./login_form.js" ></script>
<style lang="scss">
.login-form {
input {
border-width: 1px;
border-style: solid;
border-radius: 5px;
padding: 0.2em;
}
.btn {
margin-top: 0.5em;
min-height: 28px;
}
}
</style>

4
src/components/notifications/notifications.scss
View file

@ -1,4 +1,8 @@
@import '../../_variables.scss'; @import '../../_variables.scss';
.notifications button {
min-height: 20px;
}
.notification { .notification {
padding: 0.4em 0 0 0.7em; padding: 0.4em 0 0 0.7em;
display: flex; display: flex;

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

@ -1,7 +1,7 @@
<template> <template>
<div class="notifications"> <div class="notifications">
<div class="panel panel-default base00-background"> <div class="panel panel-default base00-background">
<div class="panel-heading base01-background base04">Notifications ({{unseenCount}}) <button @click.prevent="markAsSeen">Read!</button></div> <div class="panel-heading base01-background base04">Notifications ({{unseenCount}}) <button @click.prevent="markAsSeen" class="base05 base02-background">Read!</button></div>
<div class="panel-body"> <div class="panel-body">
<div v-for="notification in visibleNotifications" class="notification" :class='{"base01-background": notification.seen}'> <div v-for="notification in visibleNotifications" class="notification" :class='{"base01-background": notification.seen}'>
<a :href="notification.action.user.statusnet_profile_url"> <a :href="notification.action.user.statusnet_profile_url">

13
src/components/post_status_form/post_status_form.vue
View file

@ -2,7 +2,7 @@
<div class="post-status-form"> <div class="post-status-form">
<form @submit.prevent="postStatus(newStatus)"> <form @submit.prevent="postStatus(newStatus)">
<div class="form-group" > <div class="form-group" >
<textarea v-model="newStatus.status" placeholder="Just landed in L.A." rows="3" class="form-control" @keyup.meta.enter="postStatus(newStatus)" @keyup.ctrl.enter="postStatus(newStatus)" @drop="fileDrop" @dragover.prevent="fileDrag"></textarea> <textarea v-model="newStatus.status" placeholder="Just landed in L.A." rows="3" class="form-control base05-border" @keyup.meta.enter="postStatus(newStatus)" @keyup.ctrl.enter="postStatus(newStatus)" @drop="fileDrop" @dragover.prevent="fileDrag"></textarea>
</div> </div>
<div class="attachments"> <div class="attachments">
<div class="attachment" v-for="file in newStatus.files"> <div class="attachment" v-for="file in newStatus.files">
@ -15,7 +15,7 @@
</div> </div>
<div class='form-bottom'> <div class='form-bottom'>
<media-upload @uploading="disableSubmit" @uploaded="addMediaFile" @upload-failed="enableSubmit" :drop-files="dropFiles"></media-upload> <media-upload @uploading="disableSubmit" @uploaded="addMediaFile" @upload-failed="enableSubmit" :drop-files="dropFiles"></media-upload>
<button :disabled="submitDisabled" type="submit" class="btn btn-default">Submit</button> <button :disabled="submitDisabled" type="submit" class="btn btn-default base05 base01-background">Submit</button>
</div> </div>
</form> </form>
</div> </div>
@ -58,7 +58,7 @@
margin: 10px; margin: 10px;
padding: 5px; padding: 5px;
background: rgba(230,230,230,0.6); background: rgba(230,230,230,0.6);
border-radius: 0.5em; border-radius: 5px;
font-weight: bold; font-weight: bold;
} }
} }
@ -77,10 +77,11 @@
} }
form textarea { form textarea {
border: none; border: solid;
border-radius: 2px; border-width: 1px;
border-radius: 5px;
line-height:16px; line-height:16px;
padding: 0.5em; padding: 5px;
resize: vertical; resize: vertical;
} }

3
src/components/status/status.vue
View file

@ -157,7 +157,8 @@
.usercard { .usercard {
border-style: solid; border-style: solid;
border-width: 1px; border-width: 1px;
border-radius: 0.5em; border-radius: 10px;
margin-bottom: 1em; margin-bottom: 1em;
margin-top: 0.2em;
} }
</style> </style>

13
src/components/user_card_content/user_card_content.vue
View file

@ -15,22 +15,22 @@
<div class="follow" v-if="loggedIn"> <div class="follow" v-if="loggedIn">
<span v-if="user.following"> <span v-if="user.following">
<!--Following them!--> <!--Following them!-->
<button @click="unfollowUser" class="base06 base01-background"> <button @click="unfollowUser" class="base01 base04-background">
Unfollow Unfollow
</button> </button>
</span> </span>
<span v-if="!user.following"> <span v-if="!user.following">
<button @click="followUser" class="base01 base04-background"> <button @click="followUser" class="base05 base01-background">
Follow Follow
</button> </button>
</span> </span>
</div> </div>
<div class='mute' v-if='isOtherUser'> <div class='mute' v-if='isOtherUser'>
<span v-if='user.muted'> <span v-if='user.muted'>
<button @click="toggleMute" class="base04 base01-background base06-border">Unmute</button> <button @click="toggleMute" class="base01 base04-background">Unmute</button>
</span> </span>
<span v-if='!user.muted'> <span v-if='!user.muted'>
<button @click="toggleMute" class="base01 base04-background base01-border">Mute</button> <button @click="toggleMute" class="base05 base01-background">Mute</button>
</span> </span>
</div> </div>
</div> </div>
@ -102,7 +102,7 @@
.profile-panel-background { .profile-panel-background {
background-color: #121517; background-color: #121517;
background-size: cover; background-size: cover;
border-radius: 0.5em 0.5em 0 0; border-radius: 10px;
} }
.profile-panel-body { .profile-panel-body {
@ -127,7 +127,7 @@
img { img {
border: 2px solid; border: 2px solid;
border-radius: 0.5em; border-radius: 5px;
flex: 1 0 100%; flex: 1 0 100%;
max-width: 48px; max-width: 48px;
max-height: 48px; max-height: 48px;
@ -185,7 +185,6 @@
button { button {
width: 92%; width: 92%;
height: 100%; height: 100%;
border: 1px solid;
} }
} }
} }