src/App.vue

@@ -47,7 +47,7 @@
 		background-color: #111;
 		color: #aaa;
 		margin: 0;
-		-webkit-tap-highlight-color: #f0ff;
+		-webkit-tap-highlight-color: #f0f0;
 	}
 
 	body a:link {

src/components/HeaderBar.vue

@@ -1,7 +1,12 @@
 <template>
-	<header>
+	<header ref="header">
 		<div class="logo">
-			<span>RedstoneServer</span>
+			<div class="small">
+				<span> RS </span>
+			</div>
+			<div class="big">
+				<span> RedstoneServer </span>
+			</div>
 		</div>
 
 		<nav ref="navigation">
@@ -18,7 +23,8 @@
 
 		<div class="user">
 			<div v-if="user">
-				<span>Username: {{ user.username }} </span>
+				<span v-if="!compressed">Username: {{ user.username }} </span>
+				<span v-else>Hi, {{ user.username }} </span>
 				<span class="link" @click="logout">Logout</span>
 			</div>
 			<router-link class="link" to="/login" v-else>Login</router-link>
@@ -46,6 +52,7 @@
 				},
 				primary: [],
 				secondary: [],
+				compressed: false,
 			}
 		},
 		created() {
@@ -62,6 +69,7 @@
 			updateMenu() {
 				//Empty to measure the whole available space.
 				this.primary = []
+				this.compressed = false
 
 				this.$nextTick(() => {
 					let menubar = this.$refs.topbar
@@ -93,6 +101,14 @@
 						}
 
 						this.secondary = this.secondary.concat(this.intLinks.secondary)
+
+						//TODO: Improve, set dropdown to middle when this mode.
+						//Check if there is still no space, if so, minimized view.
+						this.$nextTick(() => {
+							if(this.$refs.header.scrollWidth > (window.innerWidth || document.documentElement.clientWidth)) {
+								this.compressed = true
+							}
+						})
 					})
 				})
 			},
@@ -138,9 +154,16 @@
 
 		white-space: nowrap;
 		background-color: #222;
+
+		font-size: 1.5em;
 	}
 	nav {
 		flex-grow: 100;
+
+		/* try permanent? */
+		display: flex;
+		justify-content: center;
+		align-items: center;
 	}
 
 	/*
@@ -194,4 +217,25 @@
 		border-right: none;
 	}
 
+	/*
+	Header compression:
+	*/
+	.logo > .small {
+		display: none;
+	}
+
+	@media (max-width: 600px) {
+		/* Switch to the small logo */
+		.logo > .small {
+			display: initial;
+		}
+		.logo > .big {
+			display: none;
+		}
+
+		/* Center the dropdown menu */
+		.wrapper {
+			position: initial;
+		}
+	}
 </style>

src/components/inputtypes/LimitedTextField.vue

@@ -1,7 +1,7 @@
 <template>
 	<div class="width">
 		<textarea v-bind:class="{ textarea: true, not_enough: highlight && !isEnough, enough: highlight && isEnough }" type="text" v-model="inputText" />
-		<SimpleProgressBar class="progbar" :count="len" max="270" steps="5"/>
+		<SimpleProgressBar class="progbar" :count="len" max="270" steps="10"/>
 	</div>
 </template>
 

src/views/CreateApplication.vue

@@ -4,7 +4,7 @@
 		<div v-if="user">
 			<span>{{ instruction }}</span>
 			<div class="question_block" v-for="(element, index) in pattern" :key="index">
-				<span class="question">{{ element.text }}</span>
+				<h3 class="question">- {{ element.text }}</h3>
 				<span v-if="element.optional"> (Optional)</span>
 				<br>
 				<ApplicationInputSwitch class="textfield" :highlight="highlight" :type="element.type"></ApplicationInputSwitch>
@@ -51,14 +51,15 @@
 
 <style scoped>
 	.question_block {
-		margin: 1em;
+		margin: 0.5em 0em;
 	}
 
 	.question {
-		font-weight: bold;
+		display: inline;
+		color: #ccc;
 	}
 
 	.hint {
-		font-size: 0.7em;
+		font-size: 0.8em;
 	}
 </style>