Desktopansicht auf allen Seiten angepasst

This commit is contained in:
Edwina Barbalan
2019-07-21 15:20:32 +02:00
parent 92220fc11c
commit 3eb0a99813
8 changed files with 105 additions and 14 deletions
+1 -1
View File
@@ -42,7 +42,7 @@ const CreateMsgRouter = {
</div>
<div class="column is-three-quarters is-pulled-right is-hidden-touch content-desktop">
<div id="desktop" class="content card om-card">
<div id="desktop" class="content">
<h4>Neue Nachricht erstellen</h4>
<b-field>
<b-input placeholder="User" id="user"></b-input>
+41
View File
@@ -3,6 +3,8 @@ var tagArray = [];
const FileRouter = {
template: `
<div class="content">
<div class="is-hidden-desktop">
<h4>Erweiterte Suche</h4>
<b-field label="Suche nach">
<b-select
@@ -37,6 +39,45 @@ const FileRouter = {
:msg="messages[id] || {}"
></MsgCard>
</div>
</div>
<div class="column is-three-quarters is-pulled-right is-hidden-touch content-desktop">
<h4>Erweiterte Suche</h4>
<b-field label="Suche nach">
<b-select
placeholder="Wähle eine Suchform"
v-model="selectedOptions">
<option value="freeSearch">Freie Suche</option>
<option value="subject">Betreff</option>
<option value="tags">Tags</option>
<option value="text">Nachrichtentext</option>
<option value="user">User</option>
</b-select>
</b-field>
<b-field v-if="selectedOptions=='freeSearch'||selectedOptions=='subject'|| selectedOptions=='text' || selectedOptions=='user'">
<b-input id="freeSe"></b-input>
</b-field>
<b-field v-if="selectedOptions=='tags'">
<b-autocomplete rounded v-model="searchtext"
:data="filteredDataArray"
placeholder="suche..." icon="magnify"
@select="option => selected = option">
</b-autocomplete>
</b-field>
<b-button type="is-primary" @click="search">SUCHE</b-button>
<div id="om-msg-cards">
<MsgCard
v-for="id in messagelist.slice().reverse()"
:key="id"
:msg="messages[id] || {}"
></MsgCard>
</div>
</div>
</div>
`,
data: function () {
+11 -1
View File
@@ -1,11 +1,21 @@
const HomeRouter = {
template: `
<div id="om-msg-cards">
<div>
<div id="om-msg-cards" class="is-hidden-desktop">
<MsgCard
v-for="id in messagelist.slice().reverse()"
:key="id"
:msg="messages[id] || {}"
></MsgCard>
</div>
<div id="om-msg-cards" class="column is-three-quarters is-pulled-right is-hidden-touch content-desktop">
<MsgCard
v-for="id in messagelist.slice().reverse()"
:key="id"
:msg="messages[id] || {}"
></MsgCard>
</div>
</div>`,
data: function () {
return {
+6 -6
View File
@@ -29,23 +29,23 @@ Vue.component('nav-router', {
<div class="column is-sidebar-menu is-hidden-touch">
<aside class="menu is-medium">
<ul class="menu-list">
<li><router-link to="/home" class="is-hidden-touch">
<li><router-link to="/home">
<i class="material-icons">home</i> Home
</router-link></li>
<li><router-link to="/files" class="is-hidden-touch">
<i class="material-icons">language</i> Language
<li><router-link to="/files">
<i class="material-icons">search</i> Search
</router-link></li>
<li><router-link to="/createMessage" class="is-hidden-touch">
<li><router-link to="/createMessage">
<i class="material-icons">add_circle</i> Create Message
</router-link></li>
<li><router-link to="/bookmark" class="is-hidden-touch">
<li><router-link to="/bookmark">
<i class="material-icons">bookmark</i> Bookmark
</router-link></li>
<li><router-link to="/profil" class="is-hidden-touch">
<li><router-link to="/profil">
<i class="material-icons">person</i> Profil
</router-link></li>
</ul>
+21
View File
@@ -1,6 +1,7 @@
const ProfilRouter = {
template: `
<div>
<div class="is-hidden-desktop">
<div v-if="isAuth">
<profil-card></profil-card>
</div>
@@ -17,6 +18,26 @@ const ProfilRouter = {
<login-panel></login-panel>
</b-modal>
</div>
</div>
<div class="column is-three-quarters is-pulled-right is-hidden-touch content-desktop">
<div v-if="isAuth">
<profil-card></profil-card>
</div>
<div v-else>
<button class="button is-primary is-medium"
@click="isLPVisible = true">
Login
</button>
<b-modal :active.sync="isLPVisible"
@close-login-panel="closeLoginPanel"
@show-login-panel="showLoginPanel"
has-modal-card>
<login-panel></login-panel>
</b-modal>
</div>
</div>
</div>`,
data: function () {
return {