Browse Source

#buefy-changes

master
Xenia Gruenzinger 2 years ago
parent
commit
d9b249c828

+ 4
- 1
.gitignore View File

@@ -18,4 +18,7 @@ latex-files/*.run.xml
latex-files/*.toc

# config
mongodb.config.js
mongodb.config.js

# exclude Mac-File .DS_Store
*.DS_Store

+ 40
- 16
public/index.html View File

@@ -51,12 +51,7 @@
<!-- CSS_Material Design for Bootstrap fonts and icons -->
<link rel="stylesheet" href="lib/bootstrap-font-and-icons.css">
<!-- CSS_Material Design for Bootstrap minified CSS -->
<link rel="stylesheet" href="lib/bootstrap-material-design.min.css">
<!-- CSS_vuetify -->
<link href='https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons' rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet">
<!-- CSS_Custom Design -->
<link rel="stylesheet" type="text/css" href="style/style.css">
<!--<link rel="stylesheet" href="lib/bootstrap-material-design.min.css">-->

<!-- NOTE: Call manifest.json -->
<link rel="manifest" href="manifest.json">
@@ -68,15 +63,19 @@

<!-- Buefy/Vuetify -->
<script src="lib/buefy-0.7.5.js"></script>
<!-- <script src="lib/buefy-0.7.5.min.js"></script>-->
<!-- <script src="lib/buefy-0.7.5.min.js"></script>-->
<link rel="stylesheet" href="https://cdn.materialdesignicons.com/2.5.94/css/materialdesignicons.min.css">
<link rel="stylesheet" type="text/css" href="lib/buefy-0.7.5.css">
<!-- <link rel="stylesheet" type="text/css" href="lib/buefy-0.7.5.min.css">-->
<!--<link rel="stylesheet" type="text/css" href="lib/buefy-0.7.5.min.css">-->

<!-- <script src="lib/vuetify-1.5.14.js"></script>-->
<!-- <script src="lib/vuetify-1.5.14.min.js"></script>-->
<!-- <link rel="stylesheet" type="text/css" href="lib/vuetify-1.5.14.css">-->
<!-- <link rel="stylesheet" type="text/css" href="lib/vuetify-1.5.14.min.css">-->

<!-- CSS_Custom Design -->
<link rel="stylesheet" type="text/css" href="style/style.css">

<!-- NOTE: JavaScript Libs & Files -->
<script src="routes/home.js"></script>
<script src="routes/files.js"></script>
@@ -98,7 +97,12 @@
<div class="om-header">
<a class="logo-img" href="index.html"><img src="img/app_icon.png" width=45px height=45px></a>
<form class="om-searchbar">
<input type="search" placeholder="Search...">
<b-field>
<b-input placeholder="Suche..."
type="search"
icon="magnify">
</b-input>
</b-field>
</form>
</div>
</div>
@@ -108,13 +112,33 @@
<router-view></router-view>
</div>

<nav class="nav nav-tabs nav-justified om-nav" v-if="$route.path !=='/createMessage' ">
<router-link to="/home" class="nav-item nav-link"><i class="material-icons">home</i></router-link>
<router-link to="/files" class="nav-item nav-link"><i class="material-icons">language</i></router-link>
<router-link to="/createMessage" class="nav-item nav-link outlined"><i class="material-icons">add_circle</i></router-link>
<router-link to="/bookmark" class="nav-item nav-link"><i class="material-icons">bookmark</i></router-link>
<router-link to="/profil" class="nav-item nav-link"><i class="material-icons">person</i></router-link>
</nav>
<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>

+ 193
- 193
public/lib/buefy-0.7.5.css
File diff suppressed because it is too large
View File


+ 1
- 1
public/lib/buefy-0.7.5.min.css
File diff suppressed because it is too large
View File


+ 39
- 35
public/routes/createMessage.js View File

@@ -1,52 +1,48 @@
const data=[
'#th',
'#efi',
'#wichtig',
];
const CreateMsgRouter = {
template: `
<div class="card om-card">
<div class="content card om-card">
<h4>Neue Nachricht erstellen</h4>
<form class="new-msg-form" @submit.prevent=createMsg>
<div class="form-group">
<label class="bmd-label-floating">User*</label>
<input type="text" class="form-control" id="user">
</div>
<div class="form-group bmd-form-group">
<label class="bmd-label-floating">Betreff*</label>
<input type="text" class="form-control" id="subject">
</div>
<div class="form-group bmd-form-group">
<label class="bmd-label-floating">Tags</label>
<input type="text" class="form-control" id="tag">
</div>

<b-field>
<b-input placeholder="User" id="user"></b-input>
</b-field>

<b-field>
<b-input placeholder="Betreff" id="subject"></b-input>
</b-field>

<v-combobox
v-model="select"
:items="items"
label="I use chips"
multiple
chips
></v-combobox>
<b-field label="Tags">
<b-taginput
v-model="selected"
:data=items
autocomplete
allow-new:false
icon="label"
placeholder="#"
@typing="getFilteredTags" id="tag">
</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="$router.push('/home')">SENDEN</b-button>

<div class="form-group">
<label class="bmd-label-floating">Nachricht*</label>
<textarea class="form-control" id="message" rows="5"></textarea>
</div>
<button class="btn btn-default"><a @click="$router.go(-1)">ABBRECHEN </a></button>
<button type="submit" class="btn btn-raised om-btn"><a @click="$router.push('/home')">SENDEN</a></button>
</form>


</div>
`,
data: function () {
return {
select: ['Design', 'jj'],
items: [
'Programming',
'Design',
'Vue',
'Vuetify'
]
selected: [],
items: data
};
},
methods: {
@@ -76,6 +72,14 @@ const CreateMsgRouter = {
console.log(err);
}
},
getFilteredTags(text) {
this.items = data.filter((option) => {
return option
.toString()
.toLowerCase()
.indexOf(text.toLowerCase()) >= 0
})
},
},
mounted: function () {
if ($(this).bootstrapMaterialDesign)

+ 47
- 17
public/routes/login.js View File

@@ -1,34 +1,64 @@
Vue.component('login-panel', {
template: `
<div class="loginModal modal" tabindex="-1" role="dialog">
<form action="">
<div class="modal-card" style="width: auto">
<header class="modal-card-head">
<p class="modal-card-title">Login</p>
</header>
<section class="modal-card-body">

<b-field>
<b-input
placeholder="User (Ohmportal)"
:value="user"
v-model=user
required>
</b-input>
</b-field>
<b-field>
<b-input
type="password"
placeholder="Password"
:value="pwd"
required>
</b-input>
</b-field>
<b-checkbox>Eingeloggt bleiben</b-checkbox>
</section>
<footer class="modal-card-foot">
<button class="button" type="button" @click="$parent.close()">Close</button>
<button class="button is-primary" on:click="logIn(this.Event)">Login</button>
</footer>
</div>
</form>



<!--<div class="loginModal modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Login</h5>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label class="bmd-label-floating"> User (Ohmportal)</label>
<input type="text" class="form-control" length=20 ref=userField v-model=user>
</div>
<div class="form-group">
<label class="bmd-label-floating">Password</label>
<input type=password class="form-control" length=20 v-model=pwd>
</div>
</form>
<b-field>
<b-input placeholder="User (Ohmportal)" v-model=user></b-input>
</b-field>
<b-field>
<b-input type="password" placeholder="Password"></b-input>
</b-field>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal" v-on:click="closeLogin(this.Event)">Login</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal" v-on:click="closeLogin(this.Event)">Close</button>
<b-button type="button" class="btn btn-primary" data-dismiss="modal" v-on:click="closeLogin(this.Event)">Login</b-button>
<b-button type="button" class="btn btn-secondary" data-dismiss="modal" v-on:click="closeLogin(this.Event)">Close</b-button>
</div>
</div>
</div>
</div>`,
</div>-->`,
data: function () {
return {
user: "",
pwd:"",
user: "name",
pwd:"password",
};
},
methods: {
@@ -41,6 +71,6 @@ Vue.component('login-panel', {
}
},
mounted: function () {
$(".loginModal").modal ('show');
//$(".loginModal").modal ('show');
},
});

+ 13
- 16
public/routes/profil.js View File

@@ -7,34 +7,31 @@ const ProfilRouter = {
:key="profil.id"
:profil="profil"
></ProfilCard>
<button type="button" class="btn btn-primary" data-dismiss="modal" v-on:click="logOut() ">Logout</button>
<b-button type="button" class="btn btn-primary" data-dismiss="modal" v-on:click="logOut() ">Logout</b-button>
</div>
<div v-else-if="!isAuthentified">
<button v-on:click="showLoginModal=true" @clicked="logIn">Login</button>
<v-rating v-model="rating"></v-rating>
<login-panel v-if="showLoginModal" @clicked="closeModal" ></login-panel>
<button class="button is-primary is-medium" @click="isModalActive = true">
Login
</button>

<!--<login-panel v-if="showLoginModal" @clicked="closeModal" ></login-panel>-->

<b-modal :active.sync="showLoginModal" has-modal-card>
<login-panel v-bind="formProps"></login-panel>
</b-modal>
</div>
</div>`,
data: function () {
return {
isModalActive: false,
profilcard: _profilcard,
showLoginModal: false,
isAuthentified: false,
rating: 3,

};
},
methods: {
closeModal (value) {
checkAuthentication (value) {
this.showLoginModal = value;
this.isAuthentified = !this.isAuthentified;
},

logIn (value) {
this.showLoginModal=false;
},

logOut () {
this.isAuthentified=false;
},
},
};

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

@@ -71,6 +71,9 @@
.om-user-line i {
margin-right: 2%;
}
taginput-container is-focusable:focus {
border-color: #0046a0 !important;
}
.bookmark-headline {
margin: 10px;
padding-bottom: 10px;

+ 6
- 0
public/style/style.less View File

@@ -89,6 +89,12 @@ a.nav-item.nav-link{
}
}

//createMsg
taginput-container is-focusable:focus {
border-color: @color !important;
//box-shadow: 0;
}

// bookmark
.bookmark-headline{
margin: 10px;

Loading…
Cancel
Save