sjw/pleroma-fe
1
0
Fork 0
mirror of https://git.pleroma.social/sjw/pleroma-fe.git synced 2024-12-24 17:45:39 +01:00
Code Issues 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;
}
}
}