X-Git-Url: https://git.auder.net/?a=blobdiff_plain;f=client%2Fsrc%2FApp.vue;h=0637d09ddbb88a08059298fe9ddf2a5211aca813;hb=26d8a01a40dc198b633ae86f698b1ae82415e5e1;hp=c71ebfc41893f215d3ad027f727d440cb562619e;hpb=7617c334b43d2f5fff40cbec72127ed30e5867c0;p=vchess.git diff --git a/client/src/App.vue b/client/src/App.vue index c71ebfc4..0637d09d 100644 --- a/client/src/App.vue +++ b/client/src/App.vue @@ -24,8 +24,7 @@ router-link(to="/problems") | {{ st.tr["Problems"] }} #rightMenu - .clickable(onClick="window.doClick('modalUser')") - | {{ st.user.id > 0 ? (st.user.name || "@nonymous") : "Login" }} + .clickable(onClick="window.doClick('modalUser')") {{ userName }} #divSettings.clickable(onClick="window.doClick('modalSettings')") span {{ st.tr["Settings"] }} img(src="/images/icons/settings.svg") @@ -72,6 +71,15 @@ export default { } ); }, + computed: { + userName: function() { + return ( + this.st.user.id > 0 + ? (this.st.user.name || "@nonymous") + : "Login" + ); + } + }, methods: { hideDrawer: function(e) { e.preventDefault(); //TODO: why is this needed? @@ -108,6 +116,9 @@ body .row > div padding: 0 +a + text-decoration: underline + header width: 100% display: flex @@ -149,6 +160,7 @@ table padding: 0 10px 0 0 height: 100% & > span + padding-right: 5px vertical-align: middle & > img padding: 0 @@ -176,6 +188,7 @@ nav justify-content: flex-start & > a display: inline-block + text-decoration: none color: #2c3e50 &.router-link-exact-active color: #42b983 @@ -192,6 +205,7 @@ nav margin-top: 42px padding-bottom: 5px & > a + text-decoration: none color: #2c3e50 &.router-link-exact-active color: #42b983 @@ -257,6 +271,7 @@ footer align-self: center; &:link color: #2c3e50 + text-decoration: none &:visited, &:hover color: #2c3e50 text-decoration: none @@ -273,68 +288,15 @@ footer border: none @media screen and (max-width: 420px) + .container + min-height: calc(100vh - 55px) footer height: 55px display: block padding: 5px 0 .menuitem.somenews - animation: blinkNews 1s infinite; color: red &:link, &:visited, &:hover color: red - -@keyframes blinkNews - 0%, 49% - background-color: yellow - padding: 3px - 50%, 100% - background-color: grey - padding: 3px - -// Styles for diagrams and board (partial). -// TODO: where to put that ? - -.light-square-diag - background-color: #e5e5ca - -.dark-square-diag - background-color: #6f8f57 - -div.board - float: left - height: 0 - display: inline-block - position: relative - -div.board8 - width: 12.5% - padding-bottom: 12.5% - -div.board10 - width: 10% - padding-bottom: 10% - -div.board11 - width: 9.09% - padding-bottom: 9.1% - -img.piece - width: 100% - -img.piece, img.mark-square - max-width: 100% - height: auto - display: block - -img.mark-square - opacity: 0.6 - width: 76% - position: absolute - top: 12% - left: 12% - opacity: .7 - -.in-shadow - filter: brightness(50%)