diff options
author | Julius Härtl <jus@bitgrid.net> | 2018-10-10 12:20:42 +0200 |
---|---|---|
committer | Julius Härtl <jus@bitgrid.net> | 2018-10-23 22:12:26 +0200 |
commit | 31489e37d60d63a103a4b2affece6c5e27d67b74 (patch) | |
tree | c0650cce7b31e217877c2ec31f5d473297497f9c /src/App.vue | |
parent | d5643d82ab8c8160e205970ca346bfba8a7ad947 (diff) |
Adjust design
Signed-off-by: Julius Härtl <jus@bitgrid.net>
Diffstat (limited to 'src/App.vue')
-rw-r--r-- | src/App.vue | 52 |
1 files changed, 44 insertions, 8 deletions
diff --git a/src/App.vue b/src/App.vue index 984a0d0f..1f6baeb3 100644 --- a/src/App.vue +++ b/src/App.vue @@ -5,8 +5,8 @@ </div> <div id="app-content"> <div class="social__container"> - <div class="social__welcome"> - <a class="close icon-close" href="#"><span class="hidden-visually">Close</span></a> + <div class="social__welcome" v-if="!infoHidden"> + <a class="close icon-close" @click="hideInfo()" href="#"><span class="hidden-visually">Close</span></a> <h3>🎉{{ t('social', 'Nextcloud becomes part of the federated social networks!') }}</h3> <p> {{ t('social', 'We have automatically created a social account for you. Your social id is the same as the federated cloud id:') }} @@ -19,8 +19,11 @@ <div class="avatar currentUser" data-username="admin"><img src="/index.php/avatar/admin/32?v=1" alt=""></div> </div> <form class="new-post-form"> - <div class="author currentUser">Julius Haertl</div> - <div contenteditable="true" class="message" data-placeholder="New comment …"></div> + <div class="author currentUser"> + {{ currentUser.displayName }} + <span class="social-id">{{ socialId }}</span> + </div> + <div contenteditable="true" class="message" placeholder="Share a thought…"></div> <input class="submit icon-confirm has-tooltip" type="submit" value="" title="" data-original-title="Post"> <div class="submitLoading icon-loading-small hidden"></div> </form> @@ -34,7 +37,10 @@ <style scoped> .social__welcome { + max-width: 700px; + margin: 15px auto; padding: 15px; + border-radius: 10px; background-color: var(--color-background-dark); } @@ -46,18 +52,30 @@ float:right; } - .social-id { + .social__welcome .social-id { font-weight: bold; } + + .social__timeline { + max-width: 700px; + margin: 15px auto; + } + .new-post { display: flex; padding: 10px; - border-bottom: 1px solid var(--color-background-dark); - + background-color: var(--color-main-background); + position: sticky; + top: 47px; + z-index: 100; + margin-bottom: 10px; } .new-post-author { padding: 5px; } + .author .social-id { + opacity: .5; + } .new-post-form { flex-grow: 1; position: relative; @@ -65,6 +83,11 @@ .message { width: 100%; } + [contenteditable=true]:empty:before{ + content: attr(placeholder); + display: block; /* For Firefox */ + opacity: .5; + } input[type=submit] { width: 44px; height: 44px; @@ -77,6 +100,11 @@ bottom: 0; right: 0; } + + #app-content { + position: relative; + } + </style> @@ -94,7 +122,7 @@ }, data: function () { return { - + infoHidden: false, }; }, beforeMount: function() { @@ -114,7 +142,15 @@ } this.$store.commit('addToTimeline', data); }, + methods: { + hideInfo() { + this.infoHidden = true; + } + }, computed: { + currentUser: function() { + return OC.getCurrentUser(); + }, socialId: function() { return '@' + OC.getCurrentUser().uid + '@' + OC.getHost(); }, |