Kai/habitica
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Client: semantic ui -> bootstrap 4 and less -> scss (#8535)

Browse Source 
* client: semantic ui -> bootstrap 4 and less -> scss

* start porting components to boostrap

* port header, start porting menu

* port loading screen

* port most of the menu

* port secondary menus

* port guilds and stable

* disable tavern for now, port inbox

* typo

* put back old tavern code
This commit is contained in:
Matteo Pagliazzi
2017-03-06 20:09:34 +01:00
committed by GitHub
parent 0a35e63897
commit 4978a62829
31 changed files with 495 additions and 812 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/client/components/appHeader.vue
+14 -16
View File
@@ -1,32 +1,32 @@
<template lang="pug">
#app-header.row
avatar#header-avatar(:user="$store.state.user")
.eight.wide.column
div
span.character-name {{user.profile.name}}
span.character-level Lvl {{user.stats.lvl}}
.progress-container
.progress-container.d-flex
img.icon(src="~assets/header/png/health@3x.png")
.ui.progress.red
.bar(:style="{width: `${percent(user.stats.hp, maxHealth)}%`}")
.progress
.progress-bar.bg-danger(:style="{width: `${percent(user.stats.hp, maxHealth)}%`}")
span {{user.stats.hp | round}} / {{maxHealth}}
.progress-container
.progress-container.d-flex
img.icon(src="~assets/header/png/experience@3x.png")
.ui.progress.yellow
.bar(:style="{width: `${percent(user.stats.exp, toNextLevel)}%`}")
.progress
.progress-bar.bg-warning(:style="{width: `${percent(user.stats.exp, toNextLevel)}%`}")
span {{user.stats.exp | round}} / {{toNextLevel}}
.progress-container(ng-if="user.flags.classSelected && !user.preferences.disableClasses")
.progress-container.d-flex(ng-if="user.flags.classSelected && !user.preferences.disableClasses")
img.icon(src="~assets/header/png/magic@3x.png")
.ui.progress.blue
.bar(:style="{width: `${percent(user.stats.mp, maxMP)}%`}")
.progress
.progress-bar(:style="{width: `${percent(user.stats.mp, maxMP)}%`}")
span {{user.stats.mp | round}} / {{maxMP}}
</template>
<style scoped>
/* TODO refactor: only partially ported from SemanticUI; */
#app-header {
padding: 0px 0px 0px 20px;
padding-left: 14px;
margin-top: 56px;
background: #36205d;
margin-left: 1rem;
height: 192px;
color: #d5c8ff;
}
@@ -54,8 +54,6 @@
}
.progress-container {
display: flex;
align-items: center;
margin-bottom: 12px;
}
@@ -71,7 +69,7 @@
margin-right: 10px;
}
.progress-container > .ui.progress {
.progress-container > .progress {
width: 203px;
margin: 0px;
border-radius: 0px;
@@ -79,7 +77,7 @@
background-color: rgba(0, 0, 0, 0.35);
}
.progress-container > .ui.progress > .bar {
.progress-container > .progress > .progress-bar {
border-radius: 0px;
height: 12px;
min-width: 0px;