Commit 045d1a9e authored by JosephK's avatar JosephK
Browse files

馃拝 margin, padding, etc

parent 5559023d
Pipeline #361644 passed with stages
in 5 minutes and 25 seconds
<template>
<main>
<div class="row">
<b-row>
<Carousel />
</b-row>
<b-alert
show
variant="warning m-4"
<b-row>
<b-col
class="mx-auto my-4"
lg="8"
>
<h4 v-html="$t('info.educ_nat.title')"></h4>
<p v-html="$t('info.educ_nat.body')"></p>
</b-alert>
<div
v-if="instance"
class="col-md-12 text-center mt-3 mb-5"
<b-alert
show
variant="warning"
v-html="$t('info.educ_nat.body')"
/>
</b-col>
</b-row>
<b-row>
<b-col
class="mx-auto text-center"
md="8"
>
<b-dropdown
split
......@@ -23,7 +31,7 @@
offset="-80"
>
<template v-slot:button-content>
<svg-icon name="video-camera" />
<svg-icon name="video" />
<span v-html="$t('public.create')"></span>
<span v-html="$t('public.atalk')"></span>
</template>
......@@ -103,7 +111,7 @@
@click="create"
>
<svg-icon
name="video-camera"
name="video"
size="lg"
/>
<span v-html="$t('public.create')"></span>
......@@ -116,70 +124,76 @@
</b-input-group>
</b-form-group>
</b-form>
<div class="row justify-content-md-center">
<div
v-if="instance && !instance.endpoint.includes('framatalk')"
class="col-md-8"
>
<span
v-if="instance"
class="text-muted"
v-html="$t('public.external', {
title: instance.title,
website: instance.website
})"
></span>
<span
v-if="instance && instance.chatons"
class="text-muted"
v-html="$t('public.chatons')"
></span>.<br />
<router-link
:to="`/${$t('lang')}/info`"
class="text-muted"
v-html="$t('public.full_list', { nbinstances: nbInstances })"
/>
</div>
<div
v-else-if="instance"
id="frama_other_message"
class="col-md-6"
>
<span
class="text-muted"
v-html="$t('public.frama_other')"
></span><br />
<router-link
:to="`/${$t('lang')}/info`"
class="text-muted"
v-html="$t('public.full_list', { nbinstances: nbInstances })"
/>
</div>
</div>
</div>
</b-col>
</b-row>
<div class="col-md-6">
<div
class="alert"
v-html="$t('what.md')"
></div>
</div>
<b-row class="justify-content-md-center mb-4">
<b-col
v-if="!instance.endpoint.includes('framatalk')"
class="mt-2"
lg="6"
md="8"
>
<span
class="text-muted"
v-html="$t('public.external', {
title: instance.title,
website: instance.website
})"
></span>
<span
v-if="instance.chatons"
class="text-muted"
v-html="$t('public.chatons')"
></span>.<br />
<router-link
:to="`/${$t('lang')}/info`"
class="text-muted"
v-html="$t('public.full_list', { nbinstances: nbInstances })"
/>
</b-col>
<div class="col-md-6 pr-4 pl-0">
<div
class="alert alert-info"
<b-col
id="frama_other_message"
class="mt-2"
lg="6"
md="8"
>
<span
class="text-muted"
v-html="$t('public.frama_other')"
></span><br />
<router-link
:to="`/${$t('lang')}/info`"
class="text-muted"
v-html="$t('public.full_list', { nbinstances: nbInstances })"
/>
</b-col>
</b-row>
<b-row>
<b-col
class="py-2"
md="6"
v-html="$t('what.md')"
/>
<b-col
class="py-2"
md="6"
>
<b-alert
show
v-html="$t('tip', {
icon: `<span class='svg-icon'><svg xmlns='http://www.w3.org/2000/svg' class='fa-fw' fill='#677890' viewBox='0 0 576 512'><path d='M336.2 64H47.8A47.8 47.8 0 000 111.8v288.4A47.8 47.8 0 0047.8 448h288.4a47.8 47.8 0 0047.8-47.8V111.8A47.8 47.8 0 00336.2 64zm189.4 37.7L416 177.3v157.4l109.6 75.5c21.2 14.6 50.4-.3 50.4-25.8V127.5c0-25.4-29.1-40.4-50.4-25.8z'/></svg></span>`
})"
></div>
</div>
</div>
<hr role="presentation" />
/>
</b-col>
</b-row>
<div class="row mt-4">
<b-row class="mt-4">
<!-- Help -->
<div class="col-md-4">
<b-col md="4">
<h2 v-html="$t('help.title')"></h2>
<svg-icon
name="question-circle"
......@@ -191,10 +205,10 @@
icon: `<i class='fa fa-info-circle' aria-hidden='true'></i>`
})"
></div>
</div>
</b-col>
<!-- About software -->
<div class="col-md-4">
<b-col md="4">
<h2 v-html="$t('software.title')"></h2>
<svg-icon
name="cloud"
......@@ -202,10 +216,10 @@
variant="d-block text-center mb-3 fc-g6"
/>
<div v-html="$t('software.md', { link: 'https://meet.jit.si' })"></div>
</div>
</b-col>
<!-- Garden -->
<div class="col-md-4">
<b-col md="4">
<h2 v-html="$t('garden.title')"></h2>
<svg-icon
name="leaf"
......@@ -222,8 +236,8 @@
name="leaf"
/>
</b-button>
</div>
</div>
</b-col>
</b-row>
</main>
</template>
......@@ -247,7 +261,7 @@ export default {
prefix: Math.trunc(new Date().getTime() / 3600000).toString(36),
status: {},
name,
instance: null,
instance: this.$t('instances.framatalk'),
instances: this.$t('instances'),
};
},
......
<template>
<div class="col-12 carousel-container">
<b-col
class="carousel-container"
cols="12"
>
<b-carousel
id="f-carousel"
ref="f-carousel"
class="mx-0 my-4"
controls
fade
:indicators="false"
......@@ -26,10 +30,10 @@
/>
</b-carousel>
<p
v-show="interval === 5000"
class="text-center play-pause"
>
<button
v-show="interval === 5000"
class="carousel-control"
@click="interval = 0"
>
......@@ -38,14 +42,11 @@
name="pause"
size="fw"
sr-only
variant="mt-n1"
/>
</button>
</p>
<p
v-show="interval !== 5000"
class="text-center play-pause"
>
<button
v-show="interval !== 5000"
class="carousel-control"
@click="interval = 5000"
>
......@@ -54,10 +55,11 @@
name="play"
size="fw"
sr-only
variant="mt-n1"
/>
</button>
</p>
</div>
</b-col>
</template>
<script>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment