sam/pleroma-fe
sam/pleroma-fe
1
0
Fork 0
Code Issues Pull requests 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;
&:hover {
background-color: white;
//background-color: white;
opacity: 0.8;
}
}
@ -175,7 +176,7 @@ status-text-container {
margin-top: 0.2em;
float: right;
margin-right: 0.3em;
border-radius: 20%;
border-radius: 5px;
}
}

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

@ -34,9 +34,10 @@
.attachments {
display: flex;
flex-wrap: wrap;
margin-right: -0.8em;
.attachment {
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;
&.html {
@ -49,14 +50,14 @@
margin: 10px;
padding: 5px;
background: rgba(230,230,230,0.6);
border-radius: 0.5em;
border-radius: 5px;
font-weight: bold;
}
video {
height: 100%;
border: 1px solid;
border-radius: 0.5em;
border-radius: 5px;
width: 100%;
}
@ -69,7 +70,7 @@
height: 100%;
flex: 1;
border: 1px solid;
border-radius: 0.5em;
border-radius: 5px;
}
@ -89,7 +90,7 @@
flex: 1;
img {
border: 0px;
border-radius: 0;
border-radius: 5px;
height: 100%;
object-fit: cover;
}
@ -113,7 +114,7 @@
width: 100%;
border-style: solid;
border-width: 1px;
border-radius: 0.5em;
border-radius: 5px;
width: 100%;
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
</div>
<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'>
<label for='username'>Username</label>
<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'>
</div>
<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>
</form>
</div>
@ -23,3 +23,21 @@
</template>
<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';
.notifications button {
min-height: 20px;
}
.notification {
padding: 0.4em 0 0 0.7em;
display: flex;

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

@ -1,7 +1,7 @@
<template>
<div class="notifications">
<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 v-for="notification in visibleNotifications" class="notification" :class='{"base01-background": notification.seen}'>
<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">
<form @submit.prevent="postStatus(newStatus)">
<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 class="attachments">
<div class="attachment" v-for="file in newStatus.files">
@ -15,7 +15,7 @@
</div>
<div class='form-bottom'>
<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>
</form>
</div>
@ -58,7 +58,7 @@
margin: 10px;
padding: 5px;
background: rgba(230,230,230,0.6);
border-radius: 0.5em;
border-radius: 5px;
font-weight: bold;
}
}
@ -77,10 +77,11 @@
}
form textarea {
border: none;
border-radius: 2px;
border: solid;
border-width: 1px;
border-radius: 5px;
line-height:16px;
padding: 0.5em;
padding: 5px;
resize: vertical;
}

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

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

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

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