font-size: 1.5rem; } | font-size: 1.5rem; } | ||||
.menu-list { | .menu-list { | ||||
line-height: 1.25; | |||||
line-height: 1.5; | |||||
float: left; | float: left; | ||||
width: 230px; | width: 230px; | ||||
height: 100%; | height: 100%; | ||||
color: white; } | color: white; } | ||||
.menu-list a { | .menu-list a { | ||||
border-radius: 2px; | border-radius: 2px; | ||||
padding-bottom: 5px; | |||||
display: block; | display: block; | ||||
padding: 0.5em 0.75em; | padding: 0.5em 0.75em; | ||||
background-color: #0046a0; | background-color: #0046a0; | ||||
margin: 0.75em; | margin: 0.75em; | ||||
padding-left: 0.75em; | padding-left: 0.75em; | ||||
background-color: #0046a0; } | background-color: #0046a0; } | ||||
.menu-item li a { | |||||
display: block; | |||||
padding: 8px 16px; | |||||
.menu-item li { | |||||
line-height: 1.5; | |||||
text-decoration: none; | text-decoration: none; | ||||
color: white; | color: white; | ||||
} | } |
const CreateMsgRouter = { | const CreateMsgRouter = { | ||||
template: ` | template: ` | ||||
<div class="content"> | <div class="content"> | ||||
<div class="is-hidden-desktop"> | |||||
<div id="mobile" class="content card om-card"> | |||||
<div class="column pull-right-sm is-four-fifths-desktop"> | |||||
<div id="mobile" class="om-card card"> | |||||
<h4>Neue Nachricht erstellen</h4> | <h4>Neue Nachricht erstellen</h4> | ||||
<b-field> | <b-field> | ||||
<b-input placeholder="User" id="user"></b-input> | <b-input placeholder="User" id="user"></b-input> | ||||
<b-button type="is-primary" @click="createMsg">SENDEN</b-button> | <b-button type="is-primary" @click="createMsg">SENDEN</b-button> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
<div class="column is-three-quarters is-pulled-right is-hidden-touch content-desktop"> | |||||
<div id="desktop" class="content"> | |||||
<h4>Neue Nachricht erstellen</h4> | |||||
<b-field> | |||||
<b-input placeholder="User" id="user"></b-input> | |||||
</b-field> | |||||
<b-field> | |||||
<b-input placeholder="Betreff" id="subject"></b-input> | |||||
</b-field> | |||||
<b-field label="Tags"> | |||||
<b-taginput | |||||
id="tag" | |||||
v-model="selected" | |||||
:data="filteredDataArray" | |||||
autocomplete | |||||
allow-new:false | |||||
icon="label" | |||||
placeholder="#" | |||||
@input="saveTagsToArray"> | |||||
</b-taginput> | |||||
</b-field> | |||||
<b-field> | |||||
<b-input placeholder="Nachricht" id="message" type="textarea"></b-input> | |||||
</b-field> | |||||
<b-button @click="$router.go(-1)">ABBRECHEN</b-button> | |||||
<b-button type="is-primary" @click="createMsg">SENDEN</b-button> | |||||
</div> | |||||
</div> | |||||
</div>`, | </div>`, | ||||
data: function () { | data: function () { |
const FileRouter = { | const FileRouter = { | ||||
template: ` | template: ` | ||||
<div class="content"> | <div class="content"> | ||||
<div class="is-hidden-desktop"> | |||||
<div class="column is-four-fifths-desktop pull-right-sm"> | |||||
<h4>Erweiterte Suche</h4> | <h4>Erweiterte Suche</h4> | ||||
<b-field label="Suche nach"> | <b-field label="Suche nach"> | ||||
<b-select | <b-select | ||||
></MsgCard> | ></MsgCard> | ||||
</div> | </div> | ||||
</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> | </div> | ||||
`, | `, | ||||
data: function () { | data: function () { |
.om-content a:hover { | .om-content a:hover { | ||||
color: #0046a0; | color: #0046a0; | ||||
} | } | ||||
.om-content a .menu-list { | |||||
color: white !important; | |||||
} | |||||
.om-content a .menu-list:hover { | |||||
color: white !important; | |||||
} | |||||
.content-desktop { | .content-desktop { | ||||
margin-right: 30px; | margin-right: 30px; | ||||
} | } | ||||
.taglink { | .taglink { | ||||
color: #0046a0; | color: #0046a0; | ||||
} | } | ||||
@media (min-width: 1088px) { | |||||
.pull-right-sm { | |||||
float: right; | |||||
} | |||||
} |
a{ | a{ | ||||
color: #0046a0; | color: #0046a0; | ||||
&:hover{color: #0046a0;} | &:hover{color: #0046a0;} | ||||
.menu-list { | |||||
color: white !important; | |||||
&:hover{color: white !important; } | |||||
}} | |||||
} | |||||
} | } | ||||
.content-desktop { | .content-desktop { | ||||
color: @color; | color: @color; | ||||
} | } | ||||
@media (min-width: 1088px) { | |||||
.pull-right-sm { | |||||
float: right; | |||||
} | |||||
} |