src/components/ApplicationInputSwitch.vue

@@ -1,6 +1,6 @@
 <template>
 	<div>
-		<LimitedTextField v-if="type === 'text-box-limited'" :highlight="highlight"/>
+		<LimitedTextField v-if="type === 'text-box-limited'" :highlight="highlight" :options="options"/>
 		<TextField v-else-if="type === 'text-box'" />
 		<LineInput v-else-if="type === 'line'" />
 
@@ -17,6 +17,7 @@
 		props: [
 			'type',
 			'highlight',
+			'options',
 		],
 		components: {
 			LimitedTextField,

src/components/HeaderBar.vue

@@ -1,6 +1,6 @@
 <template>
 	<header ref="header">
-		<div class="logo">
+		<div class="logo padder">
 			<div class="small">
 				<span> RS </span>
 			</div>
@@ -11,23 +11,28 @@
 
 		<nav ref="navigation">
 			<div class="topbar" ref="topbar">
-				<router-link class="t_link link" :to="element.val" v-for="element in primary" :key="element.key">{{ element.key }}</router-link>
+				<router-link class="t_link link padder" :to="element.val" v-for="element in primary" :key="element.key">{{ element.key }}</router-link>
 			</div>
 			<div class="wrapper">
-				<span class="t_link_d t_link link" ref="dropdownArrow">VV</span>
+				<span class="t_link_d t_link link padder" ref="dropdownArrow">VV</span>
 				<div class="dropdown">
 					<router-link class="d_link link" :to="element.val" v-for="element in secondary" :key="element.key">{{ element.key }}</router-link>
 				</div>
 			</div>
 		</nav>
 
-		<div class="user">
+		<div class="user padder">
 			<div v-if="user">
-				<span v-if="!compressed">Username: {{ user.username }} </span>
-				<span v-else>Hi, {{ user.username }} </span>
-				<span class="link" @click="logout">Logout</span>
+				<div class="big">
+					<span>Username: {{ user.username }} </span>
+					<span class="link padder" @click="logout">Logout</span>
+				</div>
+				<div class="small">
+					<span>Hi, {{ user.username }} </span>
+					<span class="link padder" @click="logout">Logout</span>
+				</div>
 			</div>
-			<router-link class="link" to="/login" v-else>Login</router-link>
+			<router-link class="link padder" to="/login" v-else>Login</router-link>
 		</div>
 	</header>
 </template>
@@ -52,7 +57,6 @@
 				},
 				primary: [],
 				secondary: [],
-				compressed: false,
 			}
 		},
 		created() {
@@ -101,14 +105,6 @@
 						}
 
 						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
-							}
-						})
 					})
 				})
 			},
@@ -174,6 +170,9 @@
 		display: none;
 
 		background-color: #222;
+
+		/* Padder fix */
+		margin-top: 0.2em;
 		
 		right: 50%;
 		transform: translateX(50%);
@@ -220,16 +219,28 @@
 	/*
 	Header compression:
 	*/
-	.logo > .small {
+	.small {
 		display: none;
 	}
 
+	/*
+	Padding top-bottom
+	*/
+	.padder {
+		padding-top: 0.2em;
+		padding-bottom: 0.2em;
+	}
+
+	/*
+	Small width should print less things.
+	TODO: Investigate better conditions.
+	*/
 	@media (max-width: 600px) {
 		/* Switch to the small logo */
-		.logo > .small {
+		.small {
 			display: initial;
 		}
-		.logo > .big {
+		.big {
 			display: none;
 		}
 

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="10"/>
+		<SimpleProgressBar class="progbar" :count="len" :max="options.min" :steps="options.steps"/>
 	</div>
 </template>
 
@@ -16,12 +16,13 @@
 		},
 
 		props: [
-			'highlight'
+			'highlight',
+			'options'
 		],
 
 		computed: {
 			isEnough() {
-				return this.inputText.length >= 270
+				return this.inputText.length >= this.options.min
 			},
 			len() {
 				return this.inputText.length

src/views/CreateApplication.vue

@@ -7,7 +7,7 @@
 				<h3 class="question">- {{ element.text }}</h3>
 				<span v-if="element.optional"> (Optional)</span>
 				<br>
-				<ApplicationInputSwitch class="textfield" :highlight="highlight" :type="element.type"></ApplicationInputSwitch>
+				<ApplicationInputSwitch class="textfield" :highlight="highlight" :type="element.type" :options="element.options"></ApplicationInputSwitch>
 				<span class="hint">{{ element.hint }}</span>
 			</div>
 			<button @click="update">Create/Update</button>