Skip to content
Snippets Groups Projects
Commit daa9c418 authored by moon's avatar moon
Browse files

Update the table style

parent 065cf3ca
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
web/src/components/UpdateItemTable.vue
+ 11
− 16
View file @ daa9c418
<template>
<div class="flex items-center justify-center panel w-full md:w-auto">
<div class="flex items-center justify-center panel-table w-full md:w-auto pt-10">
<table :id=id class="table table-striped table-bordered table-hover"></table>
</div>
</template>
......@@ -161,23 +161,18 @@ ul.pagination {
color: #0065b9;
}
.uniprot-link {
font-weight: bold;
color: #0065b9;
}
.pubmed-link {
font-weight: bold;
color: #0065b9;
}
.external-link {
font-weight: bold;
color: #0065b9;
}
.pagination {
font-size: 1.2rem;
}
.panel-table {
font-size: 1.4rem;
margin-bottom: 20px;
background-color: #fff;
border: 1px solid rgba(0, 0, 0, .05);
border-radius: 4px;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
}
</style>
web/src/views/UpdateItem.vue
+ 29
− 24
View file @ daa9c418
......@@ -2,13 +2,13 @@
<div>
<div class="flex items-center justify-center">
<div class="md:flex card p-2 mt-5">
<div class="p-5 mx-auto text-left font-raleway">
<h1 class="card-header font-bold text-left font-montserrat text-3xl sm:text-5xl mb-7">
<div class="p-5 mx-auto text-left font-raleway container max-w-screen-md">
<h1 class="font-bold text-left font-montserrat text-3xl sm:text-5xl mb-7">
{{ item === 'new'? 'Create new Update Item' : item }}
</h1>
<p v-show="error" class="text-lg text-red-500">{{ errorMsg }}</p>
<form @submit="update" class="w-full max-w-lg">
<div class="md:flex md:items-center -mx-3 mb-6">
<form @submit="update" class="w-full md:w-auto">
<div class="md:flex md:items-center mx-3 mb-6">
<div class="md:w-1/3">
<label class="text-left font-bold md:text-right mb-1 md:mb-0 pr-4" for="inline-entity-type">
Entity Type
......@@ -24,7 +24,7 @@
</div>
</div>
<div class="md:flex md:items-center -mx-3 mb-6">
<div class="md:flex md:items-center mx-3 mb-6">
<div class="md:w-1/3">
<label class="text-left font-bold md:text-right mb-1 md:mb-0 pr-4" for="inline-entity-id">
Entity ID
......@@ -35,7 +35,7 @@
</div>
</div>
<div class="md:flex md:items-center -mx-3 mb-6">
<div class="md:flex md:items-center mx-3 mb-6">
<div class="md:w-1/3">
<label class="text-left font-bold md:text-right mb-1 md:mb-0 pr-4" for="inline-change-operation">
Change Operation
......@@ -52,7 +52,7 @@
</div>
</div>
<div class="md:flex md:items-center -mx-3 mb-6">
<div class="md:flex md:items-center mx-3 mb-6">
<div class="md:w-1/3">
<label class="text-left font-bold md:text-right mb-1 md:mb-0 pr-4" for="inline-attribute-name">
Attribute Name
......@@ -63,7 +63,7 @@
</div>
</div>
<div class="md:flex md:items-center -mx-3 mb-6">
<div class="md:flex md:items-center mx-3 mb-6">
<div class="md:w-1/3">
<label class="text-left font-bold md:text-right mb-1 md:mb-0 pr-4" for="inline-attribute-value">
Attribute Value
......@@ -74,14 +74,25 @@
</div>
</div>
<div class="md:flex md:items-center -mx-3 mb-6">
<div class="md:flex md:items-center mx-3 mb-6">
<div class="md:w-1/3">
<label class="text-left font-bold md:text-right mb-1 md:mb-0 pr-4" for="inline-comment">
Comment
</label>
</div>
<div class="md:w-2/3">
<input v-model="comment" class="bg-white w-full py-2 text-gray-700 outline-none bg-transparent border-b hover:border-blue-700 focus:bg-gray-200 focus:border-blue-700" id="inline-comment" type="text" placeholder="your comments here">
</div>
</div>
<div v-if="item !== 'new'" class="md:flex md:items-center mx-3 mb-6">
<div class="md:w-1/3">
<label class="text-left font-bold md:text-right mb-1 md:mb-0 pr-4" for="inline-status">
Status
</label>
</div>
<div class="md:w-2/3">
<select v-model="status" class="bg-white w-full py-2 text-gray-700 outline-none bg-transparent border-b hover:border-blue-700 focus:bg-gray-200 focus:border-blue-700" id="inline-status" >
<select v-if="userRole === 'Maintainer' || userRole === 'Administrator'" v-model="status" class="bg-white w-full py-2 text-gray-700 outline-none bg-transparent border-b hover:border-blue-700 focus:bg-gray-200 focus:border-blue-700" id="inline-status" >
<option disabled value="">Please select one</option>
<option>Requested</option>
<option>Accepted</option>
......@@ -89,21 +100,13 @@
<option>Partially_Accepted</option>
<option>Synced</option>
</select>
<p v-if="userRole === 'Contributor' && itemId !== 'new'" class="mt-3">
{{status}}
</p>
</div>
</div>
<div class="md:flex md:items-center -mx-3 mb-6">
<div class="md:w-1/3">
<label class="text-left font-bold md:text-right mb-1 md:mb-0 pr-4" for="inline-comment">
Comment
</label>
</div>
<div class="md:w-2/3">
<input v-model="comment" class="bg-white w-full py-2 text-gray-700 outline-none bg-transparent border-b hover:border-blue-700 focus:bg-gray-200 focus:border-blue-700" id="inline-comment" type="text" placeholder="your comments here">
</div>
</div>
<div class="md:flex md:items-center -mx-3 mb-6">
<div v-if="item !== 'new'" class="md:flex md:items-center mx-3 mb-6">
<div class="md:w-1/3">
<label class="text-left font-bold md:text-right mb-1 md:mb-0 pr-4" for="inline-reviewer-comment">
Reviewer Comment
......@@ -111,7 +114,7 @@
</div>
<div class="md:w-2/3">
<input v-if="userRole === 'Maintainer' || userRole === 'Administrator'" v-model="reviewComment" class="bg-white w-full py-2 text-gray-700 outline-none bg-transparent border-b hover:border-blue-700 focus:bg-gray-200 focus:border-blue-700" id="inline-reviewer-comment" type="text" placeholder="reviewer comments here">
<p v-if="userRole === 'Contributor' && itemId !== 'new'">
<p v-if="userRole === 'Contributor' && itemId !== 'new'" class="mt-3">
{{reviewComment}}
</p>
</div>
......@@ -269,7 +272,9 @@ export default {
},
mounted: function () {
const vm = this
vm.load(vm.item)
if(vm.item !== 'new') {
vm.load(vm.item)
}
}
}
</script>
......
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