css fixes

nextcloud · Feb 9, 2021 · ef80d18 · ef80d18
1 parent afaa2cf
commit ef80d18
Show file tree

Hide file tree

Showing 3 changed files with 114 additions and 47 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -166,6 +166,87 @@ export default {
 </script>
 <style lang="scss">
 
+	.content-wrapper *:after, .content-wrapper *:before{
+		-webkit-box-sizing: border-box;
+		-moz-box-sizing: border-box;
+		box-sizing: border-box;
+	}
+
+	.row {
+		// background-color: blueviolet;
+		width: 100%;
+	}
+
+	.col-1 {
+		width: 8.33%;
+		min-width: 100px;
+	}
+
+	.col-2 {
+		width: 16.66%;
+		min-width: 200px;
+	}
+
+	.col-3 {
+		width: 25%;
+		min-width: 300px;
+	}
+
+	.col-4 {
+		width: 33.33%;
+	}
+
+	.col-5 {
+		width: 41.66%;
+	}
+
+	.col-6 {
+		width: 50%;
+	}
+
+	.col-7 {
+		width: 58.33%;
+	}
+
+	.col-8 {width: 66.66%;}
+
+	.col-9 {width: 75%;}
+
+	.col-10 {width: 83.33%;}
+
+	.col-11 {width: 91.66%;}
+
+	.col-12 {width: 100%;}
+
+	[class*='col-'] {
+		float: left;
+		padding: 15px;
+		// border: 1px solid red;
+		// background-color: aqua;
+	}
+
+	[class*='col-']:first-child {
+		// padding-left: 0;
+	}
+
+	.row::after {
+		content: '';
+		clear: both;
+		display: table;
+	}
+
+	@media only screen and (max-width: 641px) {
+		.hide-s {
+			display: none;
+		}
+	}
+
+	@media only screen and (max-width: 1025px) {
+		.hide-m {
+			display: none;
+		}
+	}
+
 	.content-wrapper {
 		padding: 35px 10px 10px 10px;
 	}

diff --git a/src/modules/weight/WeightBmi.vue b/src/modules/weight/WeightBmi.vue
@@ -75,7 +75,7 @@ export default {
 		background-color: var(--color-background-dark);
 		border-radius: 10px;
 		padding: 10px;
-		width: fit-content;
+		// width: fit-content;
 	}
 
 	.bmi .info {

diff --git a/src/modules/weight/WeightContent.vue b/src/modules/weight/WeightContent.vue
@@ -34,52 +34,38 @@
 			<div v-if="!minWeightDataset || !person.size || !person.age">
 				{{ t('health', 'To calculate your BMI, please set your weight in the table below and you age and size in the person settings.') }}
 			</div>
-			<table v-if="minWeightDataset && person.size && person.age">
-				<tr>
-					<td style="font-weight: 200; padding-left: 10px;">
-						{{ t('health', 'minimum', {}) }}
-					</td>
-					<td style="font-weight: bold; padding-left: 10px;">
-						{{ t('health', 'actual', {}) }}
-					</td>
-					<td style="font-weight: 200; padding-left: 10px;">
-						{{ t('health', 'maximum', {}) }}
-					</td>
-				</tr>
-				<tr>
-					<td>
-						<WeightBmi
-							v-if="minWeightDataset && person.size && person.age"
-							:title="t('health', 'minimum')"
-							:date="minWeightDataset ? minWeightDataset.date : null"
-							:weight="minWeightDataset ? minWeightDataset.weight : null"
-							:person="person" />
-					</td>
-					<td>
-						<WeightBmi
-							v-if="minWeightDataset && person.size && person.age"
-							:title="t('health', 'actual')"
-							:show-base-info="false"
-							:date="lastWeightDataset ? lastWeightDataset.date : null"
-							:weight="lastWeightDataset ? lastWeightDataset.weight : null"
-							:person="person" />
-					</td>
-					<td>
-						<WeightBmi
-							v-if="minWeightDataset && person.size && person.age"
-							:title="t('health', 'maximum')"
-							:show-base-info="false"
-							:date="maxWeightDataset ? maxWeightDataset.date : null"
-							:weight="maxWeightDataset ? maxWeightDataset.weight : null"
-							:person="person" />
-					</td>
-				</tr>
-				<tr>
-					<td colspan="3">
-						{{ t('health', 'The calculated value is valid only for adults. Its base are the tables from the WHO.') }}
-					</td>
-				</tr>
-			</table>
+			<div class="row">
+				<div class="col-2 hide-s">
+					{{ t('health', 'minimum', {}) }}
+					<WeightBmi
+						v-if="minWeightDataset && person.size && person.age"
+						:title="t('health', 'minimum')"
+						:date="minWeightDataset ? minWeightDataset.date : null"
+						:weight="minWeightDataset ? minWeightDataset.weight : null"
+						:person="person" />
+				</div>
+				<div class="col-2" style="font-weight: bold;">
+					{{ t('health', 'actual', {}) }}
+					<WeightBmi
+						v-if="minWeightDataset && person.size && person.age"
+						:title="t('health', 'actual')"
+						:show-base-info="false"
+						:date="lastWeightDataset ? lastWeightDataset.date : null"
+						:weight="lastWeightDataset ? lastWeightDataset.weight : null"
+						:person="person" />
+				</div>
+				<div class="col-2 hide-s">
+					{{ t('health', 'maximum', {}) }}
+					<WeightBmi
+						v-if="minWeightDataset && person.size && person.age"
+						:title="t('health', 'maximum')"
+						:show-base-info="false"
+						:date="maxWeightDataset ? maxWeightDataset.date : null"
+						:weight="maxWeightDataset ? maxWeightDataset.weight : null"
+						:person="person" />
+				</div>
+			</div>
+			{{ t('health', 'The calculated value is valid only for adults. Its base are the tables from the WHO.') }}
 		</div>
 		<div v-if="loading" class="icon-loading" />