Merge branch 'fix/various-style-fixes-all-over-the-place' into 'develop'
Fix/various style fixes all over the place See merge request !32
This commit is contained in:
lambadalambda
commit
e2ba7d9037
8 changed files with 118 additions and 66 deletions
13
src/App.scss
13
src/App.scss
|
|
@ -32,9 +32,10 @@ a {
|
|||
button{
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background-color: white;
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -102,11 +103,11 @@ main-router {
|
|||
flex-direction: column;
|
||||
margin: 0.5em;
|
||||
|
||||
border-radius: 0.5em;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.panel-heading {
|
||||
border-radius: 0.5em 0.5em 0 0;
|
||||
border-radius: 10px 10px 0 0;
|
||||
background-size: cover;
|
||||
padding: 0.6em 0;
|
||||
text-align: center;
|
||||
|
|
@ -115,7 +116,7 @@ main-router {
|
|||
}
|
||||
|
||||
.panel-footer {
|
||||
border-radius: 0 0 0.5em 0.5em;
|
||||
border-radius: 0 0 10px 10px;
|
||||
}
|
||||
|
||||
.panel-body > p {
|
||||
|
|
@ -128,7 +129,7 @@ main-router {
|
|||
#content {
|
||||
margin: auto;
|
||||
max-width: 980px;
|
||||
border-radius: 1em;
|
||||
border-radius: 10px;
|
||||
padding-bottom: 1em;
|
||||
background-color: rgba(0,0,0,0.1);
|
||||
}
|
||||
|
|
@ -174,7 +175,7 @@ status-text-container {
|
|||
margin-top: 0.2em;
|
||||
float: right;
|
||||
margin-right: 0.3em;
|
||||
border-radius: 20%;
|
||||
border-radius: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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 */
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
<template>
|
||||
<div class="login panel panel-default base00-background">
|
||||
<!-- Default panel contents -->
|
||||
<div class="panel-heading base01-background base04">
|
||||
<div class="panel-heading base01-background">
|
||||
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,22 @@
|
|||
</template>
|
||||
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -1,45 +1,65 @@
|
|||
@import '../../_variables.scss';
|
||||
.notification {
|
||||
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;
|
||||
.notifications {
|
||||
|
||||
.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;
|
||||
.panel-heading {
|
||||
// force the text to stay centered, while keeping
|
||||
// the button in the right side of the panel heading
|
||||
position: relative;
|
||||
button {
|
||||
position: absolute;
|
||||
padding: 0.1em 0.3em 0.25em 0.3em;
|
||||
right: 0.6em;
|
||||
}
|
||||
}
|
||||
|
||||
.avatar {
|
||||
padding-top: 0.3em;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
.unseen {
|
||||
border-left: 4px solid rgba(255, 48, 16, 0.65);
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border: none
|
||||
.notification {
|
||||
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
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,9 +1,12 @@
|
|||
<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}'>
|
||||
<div v-for="notification in visibleNotifications" class="notification" :class='{"unseen": !notification.seen}'>
|
||||
<a :href="notification.action.user.statusnet_profile_url">
|
||||
<img class='avatar' :src="notification.action.user.profile_image_url_original">
|
||||
</a>
|
||||
|
|
|
|||
|
|
@ -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,12 @@
|
|||
}
|
||||
|
||||
form textarea {
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
border: solid;
|
||||
border-width: 1px;
|
||||
border-color: silver;
|
||||
border-radius: 5px;
|
||||
line-height:16px;
|
||||
padding: 0.5em;
|
||||
padding: 5px;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -15,22 +15,22 @@
|
|||
<div class="follow" v-if="loggedIn">
|
||||
<span v-if="user.following">
|
||||
<!--Following them!-->
|
||||
<button @click="unfollowUser" class="base06 base01-background">
|
||||
Unfollow
|
||||
<button @click="unfollowUser" class="base04 base00-background pressed">
|
||||
Following!
|
||||
</button>
|
||||
</span>
|
||||
<span v-if="!user.following">
|
||||
<button @click="followUser" class="base01 base04-background">
|
||||
<button @click="followUser" class="base05 base02-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="base04 base00-background pressed">Muted</button>
|
||||
</span>
|
||||
<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>
|
||||
</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;
|
||||
|
|
@ -183,9 +183,14 @@
|
|||
}
|
||||
|
||||
button {
|
||||
border: solid;
|
||||
border-width: 1px;
|
||||
width: 92%;
|
||||
height: 100%;
|
||||
border: 1px solid;
|
||||
}
|
||||
.pressed {
|
||||
border: solid;
|
||||
border-width: 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue