Troplo/pleroma-fe
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Merge branch 'fix/various-style-fixes-all-over-the-place' into 'develop'

Browse source 
Fix/various style fixes all over the place

See merge request !32
This commit is contained in:
lambadalambda 2017-02-25 06:32:19 -05:00
commit e2ba7d9037
8 changed files with 118 additions and 66 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
src/App.scss
View file

@ -32,9 +32,10 @@ a {
button{ button{
border: none; border: none;
border-radius: 5px; border-radius: 5px;
cursor: pointer;
&:hover { &:hover {
background-color: white; opacity: 0.8;
} }
} }
@ -102,11 +103,11 @@ main-router {
flex-direction: column; flex-direction: column;
margin: 0.5em; margin: 0.5em;
border-radius: 0.5em; border-radius: 10px;
} }
.panel-heading { .panel-heading {
border-radius: 0.5em 0.5em 0 0; border-radius: 10px 10px 0 0;
background-size: cover; background-size: cover;
padding: 0.6em 0; padding: 0.6em 0;
text-align: center; text-align: center;
@ -115,7 +116,7 @@ main-router {
} }
.panel-footer { .panel-footer {
border-radius: 0 0 0.5em 0.5em; border-radius: 0 0 10px 10px;
} }
.panel-body > p { .panel-body > p {
@ -128,7 +129,7 @@ main-router {
#content { #content {
margin: auto; margin: auto;
max-width: 980px; max-width: 980px;
border-radius: 1em; border-radius: 10px;
padding-bottom: 1em; padding-bottom: 1em;
background-color: rgba(0,0,0,0.1); background-color: rgba(0,0,0,0.1);
} }
@ -174,7 +175,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 */
} }

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

@ -1,11 +1,11 @@
<template> <template>
<div class="login panel panel-default base00-background"> <div class="login panel panel-default base00-background">
<!-- Default panel contents --> <!-- Default panel contents -->
<div class="panel-heading base01-background base04"> <div class="panel-heading base01-background">
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,22 @@
</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-color: silver;
border-radius: 5px;
padding: 0.1em 0.2em 0.2em 0.2em;
}
.btn {
margin-top: 1.0em;
min-height: 28px;
}
}
</style>

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

@ -1,45 +1,65 @@
@import '../../_variables.scss'; @import '../../_variables.scss';
.notification {
padding: 0.4em 0 0 0.7em;
display: flex;
border-bottom: 1px solid silver;
.text { .notifications {
min-width: 0px;
word-wrap: break-word;
line-height:18px;
.icon-retweet { .panel-heading {
color: $green; // force the text to stay centered, while keeping
} // the button in the right side of the panel heading
position: relative;
.icon-reply { button {
color: $blue; position: absolute;
} padding: 0.1em 0.3em 0.25em 0.3em;
right: 0.6em;
h1 {
margin: 0 0 0.3em;
padding: 0;
font-size: 1em;
line-height:20px;
}
padding: 0.3em 0.8em 0.5em;
p {
margin: 0;
margin-top: 0;
margin-bottom: 0.3em;
} }
} }
.avatar { .unseen {
padding-top: 0.3em; border-left: 4px solid rgba(255, 48, 16, 0.65);
width: 32px;
height: 32px;
border-radius: 50%;
} }
&:last-child { .notification {
border: none padding: 0.4em 0 0 0.7em;
display: flex;
border-bottom: 1px solid silver;
.text {
min-width: 0px;
word-wrap: break-word;
line-height:18px;
.icon-retweet {
color: $green;
}
.icon-reply {
color: $blue;
}
h1 {
margin: 0 0 0.3em;
padding: 0;
font-size: 1em;
line-height:20px;
}
padding: 0.3em 0.8em 0.5em;
p {
margin: 0;
margin-top: 0;
margin-bottom: 0.3em;
}
}
.avatar {
padding-top: 0.3em;
width: 32px;
height: 32px;
border-radius: 50%;
}
&:last-child {
border: none
}
} }
} }

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

@ -1,9 +1,12 @@
<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='{"unseen": !notification.seen}'>
<a :href="notification.action.user.statusnet_profile_url"> <a :href="notification.action.user.statusnet_profile_url">
<img class='avatar' :src="notification.action.user.profile_image_url_original"> <img class='avatar' :src="notification.action.user.profile_image_url_original">
</a> </a>

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

@ -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,12 @@
} }
form textarea { form textarea {
border: none; border: solid;
border-radius: 2px; border-width: 1px;
border-color: silver;
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>

21
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="base04 base00-background pressed">
Unfollow Following!
</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 base02-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="base04 base00-background pressed">Muted</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 base02-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;
@ -183,9 +183,14 @@
} }
button { button {
border: solid;
border-width: 1px;
width: 92%; width: 92%;
height: 100%; height: 100%;
border: 1px solid; }
.pressed {
border: solid;
border-width: 1px;
} }
} }
} }