Skip to content
GitLab
Commit d50826a9 authored by Alp Deniz Ogut's avatar Alp Deniz Ogut
Browse files

Apply new UI

parent 6dd49333
Hide whitespace changes
Inline Side-by-side
Showing
with 197 additions and 81 deletions
+197 -81
public/css/app.css
+ 150
- 43
View file @ d50826a9
body {
position: absolute;
height: 99%;
width: calc(100% - 16px);
font-family: 'Karla', Verdana, Geneva, Tahoma, sans-serif;
min-height: 100%;
width: 100%;
margin: 0;
font-family: 'Karla', sans-serif;
font-size: 14px;
text-align: center;
background-color: rgba(100,100,100,0.02);
background-color: white;
}
input {
border: none;
padding: 6px;
}
#header {
font-size: 36px;
text-align: left;
font-weight: 300;
margin: 12px;
font-weight: 400;
padding: 0.5%;
background-color: #e5e5e5;
width: 99%;
}
#header_title {
margin: 10px;
}
.left {
float: left;
}
.right {
float: right;
}
.orange {
background-color: #FE570F;
color: white;
}
.row {
float: left;
width: calc(100% - 40px);
padding: 20px;
}
.button {
cursor: pointer;
padding: 10px;
margin: 8px;
opacity: 0.75;
max-width: 150px;
display: inline;
}
.button:hover {
opacity: 0.95;
}
#app {
position: absolute;
height: 90%;
min-height: 80%;
width: 100%;
}
.collapsed {
height: 0;
overflow: hidden;
visibility: hidden;
transition: height 0.3s, visibility 0.3s;
}
.expanded {
height: 330px;
visibility: visible;
transition: height 0.3s, visibility 0.3s;
}
.selected {
opacity: 1.0;
font-weight: 800;
}
.green_text {
color: rgb(7, 160, 8)
}
/*
@media screen and (min-width: 900px) {
#side-column {
width: 18%;
......@@ -48,38 +111,71 @@ body {
text-align: left;
margin: 10px;
}
} */
#connection_box {
border-bottom: 2px solid #eee;
}
#side-column > * {
padding: 10px;
margin: 10px;
width: calc(100% - 40px);
float: left;
background-color: rgba(10,10,10,0.05);
border-radius: 6px;
#query_bar > .row {
margin-left: 27%;
padding: 0;
width: 46%;
}
#side-column > * > * {
margin: 5px;
#query_text {
outline: none;
border-bottom: 1px solid #FE570F;
width: 74%;
line-height: 180%;
color: #FE570F;
font-size: 17px;
margin-top: 4px;
}
#query_button {
color: #FE570F;
font-size: 24px;
background-color: transparent;
width: 22%;
}
#query_button:hover {
background-color: #f2f2f2;
}
#stage > table {
overflow: scroll;
border-collapse: collapse;
width: 100%;
}
.title {
font-size: 16px;
font-size: 20px;
text-align: left;
margin-left: 5px;
}
.message {
font-size: 14px;
font-weight: 400;
position: fixed;
top: 12px;
width: 20%;
padding: 0.5%;
left: 39.5%;
color: white;
font-size: 16px;
opacity: 0.0;
visibility: hidden;
transition: opacity 0.3s, visibility 0.3s;
}
.show {
visibility: visible;
opacity: 1.0;
transition: opacity 0.3s, visibility 0.3s;
}
.positive {
color: rgb(20,180,20)
background-color: rgb(20,180,20)
}
.negative {
color: rgb(180,20,20)
background-color: rgb(180,20,20)
}
.emphasis {
font-weight: bold;
......@@ -89,26 +185,29 @@ body {
float: left;
width: 100%;
margin-bottom: 10px;
background-color: rgba(10,10,10,0.05);
background-color: rgba(148, 144, 144, 0.05);
}
#stage_bar > div {
float: left;
margin: 10px;
padding: 6px;
}
#stage table {
width: 100%;
#loginbox {
text-align: left;
}
#loginbox * {
float: left;
width:97%;
margin: 2px;
#loginbox input {
background-color: #f0f0f0;
padding: 10px;
margin: 5px;
width: 20%;
line-height: 120%;
}
#loginbox button {
margin: 5px 2px;
width: 100%;
margin: 20px 8px;
width: 75px;
}
#filters label {
......@@ -157,28 +256,37 @@ body {
#list_header {
text-transform: uppercase;
font-size:13px;
background-color: #FE570F;
height: 60px;
color: white;
}
#list_body {
opacity: 0.9;
font-size:13px;
}
#list_body tr:nth-child(odd) {
background-color: white;
}
#list_body tr:nth-child(odd) {
background-color: #f5f5f5;
}
#list_body tr:hover {
background-color: rgba(254, 87, 15, 0.15)
}
#list_header > tr > td {
padding: 2px;
padding: 10px 16px;
}
.list_item {
cursor: pointer;
box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.2);
/* box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.2); */
}
.list_item:hover {
background-color: rgba(50,50,50,0.1);
}
.list_item > td {
border-top: 1px;
padding: 2px;
padding: 10px;
}
.item_details {
float: left;
......@@ -231,10 +339,8 @@ a:hover {
top: 12%;
left: 16%;
width: 64%;
border-radius: 6px;
padding: 1% 2%;
border: 2px solid rgba(50,50,50,0.2);
background-color: rgb(230,230,230);
background-color: white;
text-align: left;
z-index: 6;
}
......@@ -262,6 +368,7 @@ a:hover {
.modal_close {
float: right;
cursor: pointer;
font-size: 24px;
font-weight: bold;
font-size: 15px;
color: #bbb;
margin-top: -30px;
}
\ No newline at end of file
public/index.html
+ 30
- 36
View file @ d50826a9
......@@ -19,18 +19,26 @@
<title>Memri Item Explorer | .</title>
</head>
<body>
<div id="header">
<div>Memri Item Explorer</div>
</div>
<div id="app">
<div id="side-column">
<div id="loginbox">
<div class="message positive" v-if="notify">
{{ notify }}
</div>
<div class="message negative" v-if="warning">
{{ warning }}
</div>
<div class="message positive" v-bind:class="{ show: notify }">
{{ notify }}
</div>
<div class="message negative" v-bind:class="{ show: warning }">
{{ warning }}
</div>
<div id="header" class="row">
<div id="header_title" class="left">Datastream Explorer</div>
<div id="connect_pod" class="right button" style="margin:0;" v-on:click="display_connection_box=!display_connection_box">
<div v-if="!client">Connect to pod</div>
<div v-if="client" class="green_text">Connected</div>
</div>
</div>
<div id="connection_box" class="collapsed row" v-bind:class="{ expanded: display_connection_box }">
<div class="row">
<div class="title left">Connect to pod</div>
<div class="right"><i class="modal_close" v-on:click="display_connection_box=false">&#10006;</i></div>
</div>
<div id="loginbox" class="row">
<div>
<input type="text" v-model="pod_url">
</div>
......@@ -40,36 +48,22 @@
<div>
<input type="text" v-model="database_key" placeholder="database key">
</div>
<div>
<button v-on:click="login">LOGIN</button>
<div style="margin-top: 45px;">
<div class="button" style="background-color:black;color:white;" v-on:click="login">Connect</div>
<div class="button" v-on:click="logout">Cancel</div>
</div>
</div>
<div id="display_box">
<div class="title">Display item by id</div>
<input type="text" v-model="item_id_filter" placeholder="Item ID">
<button v-on:click="display_item(null)">DISPLAY</button>
</div>
<div id="query_bar" class="row">
<div class="row">
<input id="query_text" class="left" type="text" v-model="item_filters[query_key]" v-bind:placeholder="query_key"/>
<div id="query_button" class="left button" v-on:click="query_click">Search</div>
</div>
<div id="filters">
<div class="title">Search</div>
<div class="filter_item">
<label>Type</label>
<select v-model="item_filters.type">
<option value="">All</option>
<option v-bind:value="type" v-for="type in item_types">
{{ type }}
</option>
</select>
</div>
<div class="filter_item">
<label>ExternalId</label>
<input v-model="item_filters.externalId" type="text">
</div>
<button v-on:click="query_click" id="query">QUERY</button>
<div class="row">
<div class="button left" v-on:click="item_filters[query_key]=null; query_key=key.key" v-bind:class="{ selected: key.key==query_key }" v-for="key in query_keys">{{ key.name }}</div>
</div>
</div>
<div id="stage">
<div id="stage" class="row">
<div id="stage_bar" v-if="items.length > 0">
<div id="search_box">
<input v-model="search_text" type="text" @input="search_table" placeholder="Filter"/>
......
public/js/app.js
+ 17
- 2
View file @ d50826a9
......@@ -36,8 +36,8 @@ var app = new Vue({
pod_url: 'http://localhost:3030',
owner_key: '',
database_key: '',
item_filters: {type: "", externalId: ""},
item_id_filter: null,
item_filters: {id: "", type: "", externalId: ""},
item_types: ['Person', 'Account', 'MessageChannel', 'Message', 'Photo', 'File'],
items: [],
filtered_items: [],
......@@ -46,11 +46,19 @@ var app = new Vue({
item_display: null,
item_summary: null,
item_image: "",
display_connection_box: false,
search_text: "",
warning: null,
notify: null,
ignore_columns: ignore_columns,
display_columns: ['externalId']
display_columns: ['externalId'],
query_key: 'id',
query_text: '',
query_keys: [
{key: 'id', name: 'ID'},
{key: 'type', name: 'Type'},
{key: 'externalId', name: 'External ID'}
]
},
created: function () {
fetch('/local_keys.json').then( d => d.json()).then( d => {
......@@ -66,6 +74,12 @@ var app = new Vue({
this.client = new Memri.default(this.owner_key, this.database_key, null, this.pod_url)
this.notify = `Connected to ${this.pod_url} with ${this.client.owner_key.slice(0,6)}...`
this.warning = null
this.display_connection_box = false
},
logout: function () {
this.notify = "Client is reset";
this.client = null
this.display_connection_box = false
},
check_login: function () {
if (!this.client) {
......@@ -84,6 +98,7 @@ var app = new Vue({
}
filters['_limit'] = PAGE_SIZE
filters['dateServerModified>='] = this.items_pages[this.items_current_page]
console.log("USED FILTERS", filters)
this.client.search(filters, true).then( items => {
// mark the end of paging
console.log(items);
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment