hopfma
/
om
Watch 4
Star 1
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

Merge remote-tracking branch 'origin/developer' into developer 

# Conflicts:
#	public/index.html
#	public/routes/navRoutes.js
master
Xenia Gruenzinger 5 years ago
parent
a4da6243f5 35b5748af9
commit
a56ab9cadd
7 changed files with 269 additions and 163 deletions
Split View Show Diff Stats
  1. 3
    77
      public/index.html
  2. 34
    16
      public/lib/buefy-0.7.5.css
  3. 94
    31
      public/routes/bookmark.js
  4. 64
    28
      public/routes/createMessage.js
  5. 57
    5
      public/routes/navRoutes.js
  6. 8
    3
      public/style/style.css
  7. 9
    3
      public/style/style.less

+ 3
- 77
public/index.html View File

@@ -103,26 +103,9 @@
<b-autocomplete rounded v-model="searchtext" @keydown.native.enter="search" :data="filteredDataArray" placeholder="suche..." icon="magnify" @select="option => selected = option">
</b-autocomplete>

<!--<b-input
type="search"
v-model="searchtext"
icon="magnify"
placeholder="Suche...">
</b-input>-->
<!--<b-taginput
id="search-text"
type="search"
v-model="selected"
:data=taglist
autocomplete
allow-new:true
icon="magnify"
placeholder="Suche.."
@typing="getFilteredTags"
@input="saveTagsToArray">
</b-taginput>-->
<b-button type="is-light" @click="clear">x</b-button>
</b-field>

<button @click="clear">x</button>
</b-field>
</form>
</div>
</div>
@@ -134,51 +117,6 @@
</div>
</div>

<!--<b-tabs type="is-toggle" expanded>
<b-tab-item><router-link to="/home" >
<b-icon
pack="fas"
icon="home"
size="is-small">
</b-icon>
</router-link></b-tab-item>
<b-tab-item icon="magnify"></b-tab-item>
<b-tab-item icon="plus-circle"></b-tab-item>
<b-tab-item icon="bookmark"></b-tab-item>
<b-tab-item icon="account"></b-tab-item>

</b-tabs>-->

<!--
<nav class="navbar is-fixed-bottom is-expanded is-light is-hoverable" role="navigation" aria-label="main navigation">
<div class="navbar-brand is-expanded">
<router-link to="/home" class="navbar-item is-expanded has-text-centered is-active">
<i class="material-icons">home</i>
</router-link>
<router-link to="/files" class="navbar-item is-expanded">
<i class="material-icons">language</i>
</router-link>
<router-link to="/createMessage" class="navbar-item is-expanded">
<i class="material-icons">add_circle</i>
</router-link>
<router-link to="/bookmark" class="navbar-item is-expanded">
<i class="material-icons">bookmark</i>
</router-link>
<router-link to="/profil" class="navbar-item is-expanded">
<i class="material-icons">person</i>
</router-link>
</div>
</nav>

<nav class="nav nav-tabs nav-justified om-nav" v-if="$route.path !=='/createMessage' ">
<router-link to="/home" class="navbar-item has-text-centered"><i class="material-icons">home</i></router-link>
<router-link to="/files" class="navbar-item has-text-centered"><i class="material-icons">language</i></router-link>
<router-link to="/createMessage" class="navbar-item has-text-centered outlined"><i class="material-icons">add_circle</i></router-link>
<router-link to="/bookmark" class="navbar-item has-text-centered"><i class="material-icons">bookmark</i></router-link>
<router-link to="/profil" class="navbar-item has-text-centered"><i class="material-icons">person</i></router-link>
</nav>
</div>
-->
<script>
var isSearchActive = false;
var tagArray = ["lorem"];
@@ -190,18 +128,6 @@

</script>

<!-- const routes = [
{ path: "/", component: HomeRouter },
{ path: "/home", component: HomeRouter },
{ path: "/files", component: FileRouter },
{ path: "/createMessage", component: CreateMsgRouter },
{ path: "/bookmark", component: BookmarkRouter },
{ path: "/profil", component: ProfilRouter },
];
const router = new VueRouter({
routes
}); -->

<script>
var app = new Vue({
router,

+ 34
- 16
public/lib/buefy-0.7.5.css View File

@@ -442,13 +442,13 @@ body {
line-height: 1.5; }

a {
color: #0046a0;
color: white;
cursor: pointer;
text-decoration: none; }
a strong {
color: currentColor; }
a:hover {
color: #363636; }
color: white; }

code {
background-color: whitesmoke;
@@ -4139,22 +4139,40 @@ a.list-item {
font-size: 1.5rem; }

.menu-list {
line-height: 1.25; }
line-height: 1.25;
float: left;
width: 230px;
height: 85%;
position: fixed;
text-align: left;
background-color: #0046a0;
color: white; }
.menu-list a {
border-radius: 2px;
color: #4a4a4a;
display: block;
padding: 0.5em 0.75em; }
.menu-list a:hover {
background-color: whitesmoke;
color: #363636; }
.menu-list a.is-active {
background-color: #0046a0;
color: white; }
.menu-list li ul {
border-left: 1px solid #dbdbdb;
padding: 0.5em 0.75em;
background-color: #0046a0; }
.menu-list a:hover {
background-color: #01295d;
color: white; }
.menu-list a.is-active{
background-color: #01295d;
color: white; }
.menu-item ul {
list-style-type: none;
margin: 0.75em;
padding-left: 0.75em; }
padding-left: 0.75em;
background-color: #0046a0; }
.menu-item li a {
display: block;
padding: 8px 16px;
text-decoration: none;
color: white;
}
.menu-item {
background-color: #0046a0;
color: white;
}

.menu-label {
color: #7a7a7a;
@@ -4569,8 +4587,8 @@ a.list-item {
.navbar.is-primary .navbar-end > a.navbar-item.is-active,
.navbar.is-primary .navbar-end .navbar-link:hover,
.navbar.is-primary .navbar-end .navbar-link.is-active {
background-color: #e8e8e8;
color: #0046a0; }
background-color: #0046a0;
color: white; }
.navbar.is-primary .navbar-start .navbar-link::after,
.navbar.is-primary .navbar-end .navbar-link::after {
border-color: white; }

+ 94
- 31
public/routes/bookmark.js View File

@@ -1,48 +1,111 @@
const BookmarkRouter = {
template: `
<div>
<div class="bookmark-headline"><h4>Gepeicherte Beiträge</h4></div>
<div class="om-card card">
<h6 class="msg-head">
<div class="content">
<div class="is-hidden-desktop">
<div class="bookmark-headline"><h4>Gepeicherte Beiträge</h4></div>
<div class="om-card card">
<h6 class="msg-head">
<b>Betreff</b>
<img src="favicon.ico" width=20px height=20px>
</h6>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. <br><br>
<a href="#">#beispiel #tag</a></p>
<div class="om-card-footer"> <div class="om-user-line">
<i class="material-icons">account_circle</i>
Erstellt von User 1</div>
</h6>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. <br><br>
<a href="#">#beispiel #tag</a>
<div class="om-card-footer">
<div class="om-user-line">
<i class="material-icons">account_circle</i>
Erstellt von User 1
</div>
<i class="material-icons" @click="myFilter" v-if="!isActive">bookmark_border</i>
<i class="material-icons" @click="myFilter" v-else="isActive">bookmark</i>
</div></div>
<div class="om-card card">
<h6 class="msg-head">
</div>
</div>
<div class="om-card card">
<h6 class="msg-head">
<b>Betreff</b>
<img src="favicon.ico" width=20px height=20px>
</h6>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. <br><br>
<a href="#">#beispiel #tag</a></p>
<div class="om-card-footer"> <div class="om-user-line">
<i class="material-icons">account_circle</i>
Erstellt von User 2</div>
</h6>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. <br><br>
<a href="#">#beispiel #tag</a>
<div class="om-card-footer">
<div class="om-user-line">
<i class="material-icons">account_circle</i>
Erstellt von User 2
</div>
<i class="material-icons" @click="myFilter" v-if="!isActive">bookmark_border</i>
<i class="material-icons" @click="myFilter" v-else="isActive">bookmark</i>
</div>
</div>
<div class="om-card card">
<h6 class="msg-head">
<b>Betreff</b>
<img src="favicon.ico" width=20px height=20px>
</h6>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. <br><br>
<a href="#">#beispiel #tag</a>
<div class="om-card-footer">
<div class="om-user-line">
<i class="material-icons">account_circle</i>
Erstellt von User 3
</div>
<i class="material-icons" @click="myFilter" v-if="!isActive">bookmark_border</i>
<i class="material-icons" @click="myFilter" v-else="isActive">bookmark</i>
</div>
</div>
</div>

<div class="column is-three-quarters is-pulled-right is-hidden-touch content-desktop">
<div class="bookmark-headline"><h4>Gepeicherte Beiträge</h4></div>
<div class="om-card card">
<h6 class="msg-head">
<b>Betreff</b>
<img src="favicon.ico" width=20px height=20px>
</h6>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. <br><br>
<a href="#">#beispiel #tag</a>
<div class="om-card-footer">
<div class="om-user-line">
<i class="material-icons">account_circle</i>
Erstellt von User 1
</div>
<i class="material-icons" @click="myFilter" v-if="!isActive">bookmark_border</i>
<i class="material-icons" @click="myFilter" v-else="isActive">bookmark</i>
</div>
</div>
<div class="om-card card">
<h6 class="msg-head">
<b>Betreff</b>
<img src="favicon.ico" width=20px height=20px>
</h6>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. <br><br>
<a href="#">#beispiel #tag</a>
<div class="om-card-footer">
<div class="om-user-line">
<i class="material-icons">account_circle</i>
Erstellt von User 2
</div>
<i class="material-icons" @click="myFilter" v-if="!isActive">bookmark_border</i>
<i class="material-icons" @click="myFilter" v-else="isActive">bookmark</i>
</div></div>
<div class="om-card card">
<h6 class="msg-head">
</div>
</div>
<div class="om-card card">
<h6 class="msg-head">
<b>Betreff</b>
<img src="favicon.ico" width=20px height=20px>
</h6>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. <br><br>
<a href="#">#beispiel #tag</a></p>
<div class="om-card-footer"> <div class="om-user-line">
<i class="material-icons">account_circle</i>
Erstellt von User 3</div>
</h6>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. <br><br>
<a href="#">#beispiel #tag</a>
<div class="om-card-footer">
<div class="om-user-line">
<i class="material-icons">account_circle</i>
Erstellt von User 3
</div>
<i class="material-icons" @click="myFilter" v-if="!isActive">bookmark_border</i>
<i class="material-icons" @click="myFilter" v-else="isActive">bookmark</i>
</div></div>
</div>
</div>`,
</div>
</div>
</div>
</div>`,

data: function () {
return {
messages: _messages,

+ 64
- 28
public/routes/createMessage.js View File

@@ -6,40 +6,76 @@ const data=[
];
const CreateMsgRouter = {
template: `
<div class="content card om-card">
<h4>Neue Nachricht erstellen</h4>
<div class="content">
<div class="is-hidden-desktop">
<div class="content card om-card">
<h4>Neue Nachricht erstellen</h4>
<b-field>
<b-input placeholder="User" id="user"></b-input>
</b-field>

<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>
<b-input placeholder="Betreff" id="subject"></b-input>
</b-field>
<b-field label="Tags">
<b-taginput
id="tag"
v-model="selected"
:data=taglist
autocomplete
allow-new:false
icon="label"
placeholder="#"
@typing="getFilteredTags"
@input="saveTagsToArray">
</b-taginput>
</b-field>

<b-field label="Tags">
<b-taginput
id="tag"
v-model="selected"
:data=taglist
autocomplete
allow-new:false
icon="label"
placeholder="#"
@typing="getFilteredTags"
@input="saveTagsToArray">
</b-taginput>
</b-field>
<b-field>
<b-input placeholder="Nachricht" id="message" type="textarea"></b-input>
</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>

<b-button @click="$router.go(-1)">ABBRECHEN</b-button>
<b-button type="is-primary" @click="createMsg">SENDEN</b-button>
<div class=" column is-three-quarters is-pulled-right is-hidden-touch content-desktop">
<div class="content card om-card">
<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=taglist
autocomplete
allow-new:false
icon="label"
placeholder="#"
@typing="getFilteredTags"
@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 () {
return {
selected: [],

+ 57
- 5
public/routes/navRoutes.js View File

@@ -1,9 +1,9 @@
Vue.component('nav-router', {
template: `
<div>
<nav class="navbar is-fixed-bottom is-expanded is-primary" role="navigation" aria-label="main navigation">
<nav class="navbar is-fixed-bottom is-expanded is-primary is-hidden-desktop" role="navigation" aria-label="main navigation">
<div class="navbar-brand is-expanded is-light">
<router-link to="/home" class="navbar-item is-primary is-expanded has-text-centered">
<router-link to="/home" class="navbar-item is-primary is-expanded has-text-centered is-hidden-desktop">
<i class="material-icons">home</i>
</router-link>

@@ -11,19 +11,47 @@ Vue.component('nav-router', {
<i class="material-icons">search</i>
</router-link>

<router-link to="/createMessage" class="navbar-item is-primary is-expanded">
<router-link to="/createMessage" class="navbar-item is-primary is-expanded is-hidden-desktop">
<i class="material-icons">add_circle</i>
</router-link>

<router-link to="/bookmark" class="navbar-item is-primary is-expanded">
<router-link to="/bookmark" class="navbar-item is-primary is-expanded is-hidden-desktop">
<i class="material-icons">bookmark</i>
</router-link>

<router-link to="/profil" class="navbar-item is-primary is-expanded">
<router-link to="/profil" class="navbar-item is-primary is-expanded is-hidden-desktop">
<i class="material-icons">person</i>
</router-link>
</div>
</nav>

<div class="is-fullheight">
<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">
<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
</router-link></li>

<li><router-link to="/createMessage" class="is-hidden-touch">
<i class="material-icons">add_circle</i> Create Message
</router-link></li>

<li><router-link to="/bookmark" class="is-hidden-touch">
<i class="material-icons">bookmark</i> Bookmark
</router-link></li>

<li><router-link to="/profil" class="is-hidden-touch">
<i class="material-icons">person</i> Profil
</router-link></li>
</ul>
</aside>
</div>
</div>
</div>`,

});
@@ -41,3 +69,27 @@ const router = new VueRouter({
routes,
linkActiveClass: 'is-active'
});

/*
<div class="nav-right nav-menu is-hidden-desktop-only">
<router-link to="/home" class="nav-item is-primary is-expanded has-text-centered is-hidden-desktop-only">
<i class="material-icons">home</i> Home
</router-link>

<router-link to="/files" class="nav-item is-primary is-expanded has-text-centered is-hidden-desktop-only">
<i class="material-icons">language</i> Language
</router-link>

<router-link to="/createMessage" class="navbar-item is-primary is-expanded has-text-centered is-hidden-desktop-only">
<i class="material-icons">add_circle</i> Create Message
</router-link>

<router-link to="/bookmark" class="navbar-item is-primary is-expanded has-text-centered is-hidden-desktop-only">
<i class="material-icons">bookmark</i> Bookmark
</router-link>

<router-link to="/profil" class="navbar-item is-primary is-expanded has-text-centered is-hidden-desktop-only">
<i class="material-icons">person</i> Profil
</router-link>
</div>
*/

+ 8
- 3
public/style/style.css View File

@@ -25,14 +25,19 @@
}
.om-content {
margin: 10px;
margin-top: 80px;
margin-top: 40px;
margin-bottom: 80px;
width: auto;
overflow: hidden;
}
.om-content a {
color: #0046a0;
color: white;
}
.om-content a:hover {
color: #0046a0;
color: white;
}
.content-desktop {
margin-right: 30px;
}
.om-nav {
position: fixed;

+ 9
- 3
public/style/style.less View File

@@ -32,14 +32,20 @@
//content
.om-content{
margin: 10px;
margin-top: 80px;
margin-top: 40px;
margin-bottom: 80px;
width: auto;
overflow: hidden;
a{
color: @color;
&:hover{color:@color;}
color: white;
&:hover{color:white;}
}
}

.content-desktop {
margin-right: 30px;
}

//footer
.om-nav{
position:fixed;

Write Preview
Loading…
Cancel
Save