Skip to content

Styling Tweak #56

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 31 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
31 commits
Select commit Hold shift + click to select a range
8e8cfc8
ADD: link to item page on item img
Spazcool Dec 19, 2017
92b069f
REMOVE: forced upper & lower styling for item card titles
Spazcool Dec 19, 2017
e57e4c2
REMOVE: bootstrap nesting & extra margin around item cards
Spazcool Dec 19, 2017
5fc9303
ADD: conditional img link for item cards
Spazcool Dec 19, 2017
3161d30
REMOVE: bootstrap nesting & margin from item page divs
Spazcool Dec 19, 2017
7bc3d80
REMOVE: unused CSS rules
Spazcool Dec 19, 2017
30987d5
REMOVE: more unused CSS rules
Spazcool Dec 19, 2017
b28becc
TWEAK: title vertical centering
Spazcool Dec 19, 2017
14aa0a1
TWEAK: move inline styling to CSS file
Spazcool Dec 19, 2017
518c830
TWEAK: v-align title again
Spazcool Dec 19, 2017
42ee28a
REMOVE: unused img
Spazcool Dec 19, 2017
e80ab30
FIX: item img size increase, ADD: wrench.png for broken items
Spazcool Dec 19, 2017
dea4899
REMOVE: temp CSS classes, TWEAK: img sizes
Spazcool Dec 19, 2017
472ffc3
FIX: consistent padding & margins
Spazcool Dec 20, 2017
7fa1991
ADD: background color
Spazcool Dec 20, 2017
2e27415
FIX: shrunk & centered wrench icon
Spazcool Dec 21, 2017
0b97e59
FIX: similar items imgs align left
Spazcool Dec 21, 2017
650d060
FIX: no more round edge on imgs
Spazcool Dec 21, 2017
8dbbadc
FIX: lighter background color
Spazcool Dec 21, 2017
56d06f0
FIX: breadcrumb padding
Spazcool Dec 21, 2017
97bea3b
FIX: similar items aligned better
Spazcool Dec 21, 2017
212a390
ADD: flex, REMOVE: bootstrap from itemCard
Spazcool Dec 22, 2017
c067342
REMOVE: JS style methods, ADD: CSS rules instead
Spazcool Dec 22, 2017
7f13d77
MODIFY: itemImgInfo styling to matche itemCard style
Spazcool Dec 22, 2017
5d0612b
MODIFY: recent styling, matches itemCard
Spazcool Dec 22, 2017
dba57cf
MODIFY: notFound styling matches itemCard
Spazcool Dec 22, 2017
a036d1a
REMOVE: JS styling methods from qrList
Spazcool Dec 22, 2017
b23af9d
REMOVE: bootstrap and nesting from qrList
Spazcool Dec 22, 2017
47aac90
FIX: title style to match itemCard, REMOVE: dead code from itemCard
Spazcool Dec 23, 2017
c26294a
FIX: CSS rules for card and titleCard classes
Spazcool Dec 24, 2017
07ef078
REMOVE: grey background from cards
Spazcool Dec 24, 2017
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion i_love_qr.svg

This file was deleted.

File renamed without changes
132 changes: 81 additions & 51 deletions public/main.css
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,8 @@
background-repeat: no-repeat;
background-size: cover;
height: 7em;
margin-bottom: 1em;
margin-top: 1em;
margin: 1em 0;
padding: 0 5px;
position: relative;
width: 100%;
}
Expand All @@ -20,82 +20,112 @@

#appTitle {
color: white;
font-size: 3em;
overflow: hidden;
text-align: center;
white-space: nowrap;
font-size: 1.5em;
line-height: 3.2em;
}

@media screen and (max-width: 500px) {
@media screen and (min-width: 500px) {
#appTitle {
color: white;
font-size: 1.5em;
margin-left: 0;
overflow: hidden;
padding-left: 0;
padding-top: 13px;
text-align: left;
white-space: nowrap;
font-size: 3em;
line-height: 1.5em;
text-align: center;
}

#miniImg1{
margin: 0 0 0 2em;
}

.status{
width: 35%;
}

.sticker{
font-size: 40%;
width: 19%;
}
}

.resultContainer {
margin-top: 1em;
overflow: hidden;
margin-top: 1em;
overflow: hidden;
width: 100%;
}

.faded{
opacity: 0.5;
.breadcrumbs{
margin-left: 10px;
}

.itemImg {
font-size: 11vw;
margin-left: -3vw;
width: 300%;
.card{
margin: 5px;
padding: 5px;
}

@media screen and (min-width: 500px) {
.itemImg {
font-size: 9vw;
margin-left: 0;
width: 100%;
}
.titleCard{
align-items: center;
display: flex;
justify-content: space-between;
}

.image {
flex: 1;
}

.itemImg {
max-height: 150px;
max-width: 100%;
}

.itemTitle {
text-align: center;
flex: 2;
}

.infoBox {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
.center {
font-weight: bold;
padding: 20px;
text-align: center;
}

article {
background-color: whitesmoke;
border-radius: 3px;
margin-bottom: 1em;
padding-bottom: 1em;
padding-top: 1em;
.subTitle{
font-size: 0.75em;
font-style: italic;
font-weight: normal;
}

.miniSearchItem{
padding-bottom: 1em;
padding-top: 1em;
.right {
text-align: right;
}

.status{
width: 65%;
}

.faded{
opacity: 0.5;
}

.infoTitle{
font-size: 2em;
margin-top: -7.5px;
}

.miniItemImg{
width:100%;
width: 32.5%;
}

#miniImg1{
margin: 0 0 0 0.05em;
}
.searchResultList {
list-style: none;
padding: 0;

#miniImg2{
float: right;
margin-right: 0;
}

.stickers{
.sticker{
border: 1px dotted black;
font-size: 30%;
padding-bottom: 1em;
padding-top: 1em;
display: inline-block;
font-size: 90%;
margin: 0;
padding: 1em 0;
width: 99%;
}
Binary file added public/wrench.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
6 changes: 3 additions & 3 deletions views/item.ejs
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<% include ./partials/header %>
<div class="resultContainer container">
<div class="col-xs-12"><% include ./partials/itemCards %></div>
<div class="col-xs-12"><% include ./partials/itemImgInfo %></div>
<div class="resultContainer">
<% include ./partials/itemCards %>
<% include ./partials/itemImgInfo %>
</div>
<% include ./partials/footer %>
12 changes: 5 additions & 7 deletions views/notFound.ejs
Original file line number Diff line number Diff line change
@@ -1,11 +1,9 @@
<% include ./partials/header %>

<img class="col-xs-12 col-lg-4 col-lg-offset-4" src="/emoji.png" alt="" />
<article style='margin-top:2em'class="col-xs-12 col-lg-4 col-lg-offset-4">
<center>
<img width="50%" src="/frown.png" alt="frown" />
</center>
<article class="subCard">
<p>Sorry, item not found with the id:</p>
<p>
<strong><%= id %></strong>
</p>
<strong><%= id %></strong>
</article>

<% include ./partials/footer %>
6 changes: 3 additions & 3 deletions views/partials/header.ejs
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,6 @@
</head>

<body>
<div class="logo col-xs-12">
<div id="appTitle">CoderBunker Inventory</div>
</div>
<div class="logo">
<div id="appTitle">CoderBunker Inventory</div>
</div>
47 changes: 29 additions & 18 deletions views/partials/itemCards.ejs
Original file line number Diff line number Diff line change
@@ -1,32 +1,43 @@
<div class="col-xs-12">
<span> <a href="/search?floor=<%- floor %>"> <%- floor.toLowerCase() %> </a></span> >
<span> <a href="/search?floor=<%- floor %>&room=<%- room %>"> <%- room.toLowerCase() %> </a></span> >
<span> <a href="/search?floor=<%- floor %>&room=<%- room %>&location=<%- location %>"> <%- location.toLowerCase() %> </a></span> >
<span> <a href="/search?fixture=<%- fixture %>"> <%- fixture.toLowerCase() %> </a></span>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

do we still need span?

<div class="breadcrumbs">
<span> <a href="/search?floor=<%- floor %>"> <%- floor %> </a></span> >
<span> <a href="/search?floor=<%- floor %>&room=<%- room %>"> <%- room %> </a></span> >
<span> <a href="/search?floor=<%- floor %>&room=<%- room %>&location=<%- location %>"> <%- location %> </a></span> >
<span> <a href="/search?fixture=<%- fixture %>"> <%- fixture %> </a></span>
</div>
<% if (uuid) { %>
<div class="well col-xs-12">
<div class="card titleCard">
<% } else { %>
<div class="well faded col-xs-12">
<div class="card titleCard faded">
<% } %>
<div class="col-xs-2">
<div class="image">
<% if (picture === undefined || picture === '') { %>
<img class="itemImg" src="noImg.png" />
<% if (uuid) { %>
<a href="/<%- uuid %>"> <img class="itemImg" src="noImg.png" /> </a>
<% } else { %>
<img class="itemImg" src="noImg.png" />
<% } %>
<% }else{ %>
<img class="itemImg" src=" <%- picture %> " />
<%}%>
<% if (uuid) { %>
<a href="/<%- uuid %>"><img class="itemImg" src=" <%- picture %> " /> </a>
<% } else { %>
<img class="itemImg" src=" <%- picture %> " />
<% } %>
<% } %>
</div>
<div class="itemTitle col-xs-8">
<div class="itemTitle">
<% if (uuid) { %>
<h4> <a href="/<%- uuid %>"> <%- fixture.toUpperCase().bold() %> </a> </h4>
<div class="center">
<a href="/<%- uuid %>"> <%- fixture %> </a>
<% } else { %>
<h4> <%- fixture.toUpperCase().bold() %> </h4>
<div class="center">
<%- fixture %>
<% } %>
<span> <%- model.toLowerCase().italics() %> </span>
<div class="subTitle"> <%- model %> </div>
</div>
</div>
<div class="itemImg col-xs-2">
<div class="image right">
<% if (status === 'broken') { %>
<span class="glyphicon glyphicon-wrench" title="Status: <%- status %>" alt="<%- status %>" style="color:red"></span>
<%}%>
<img class="status" title="Status: <%- status %>" alt="<%- status %>" src="wrench.png" />
<% } %>
</div>
</div>
52 changes: 26 additions & 26 deletions views/partials/itemImgInfo.ejs
Original file line number Diff line number Diff line change
@@ -1,39 +1,39 @@
<% if (HOWTO) { %>
<article class="well col-xs-12">
<h2>How To</h2>
<article class="card">
<div class="infoTitle">How To</div>
<%- HOWTO %>
</article>
<%}%>
<% } %>
<% if (Troubleshooting) { %>
<article class="well col-xs-12">
<h2>Need Help</h2>
<article class="card">
<div class="infoTitle">Need Help</div>
<%- Troubleshooting %>
</article>
<% } %>
<% if ( similarItems.length > 0 ) { %>
<article class="well col-xs-12">
<h2>Similar Items</h2>
<% for(var i = 0; i < similarItems.length; i++){ %>
<div class='miniSearchItem col-xs-4'>
<% if (!similarItems[i].picture) { %>
<% if (!similarItems[i].uuid) { %>
<img class="miniItemImg faded" src="noImg.png" />
<% }else{ %>
<a href="/<%- similarItems[i].uuid %>"> <img class="miniItemImg" src="noImg.png" /> </a>
<%}%>
<% } else{ %>
<% if (!similarItems[i].uuid) { %>
<img class="miniItemImg faded" src=" <%- similarItems[i].picture %> " />
<% }else{ %>
<a href="/<%- similarItems[i].uuid %>"> <img class="miniItemImg" src=" <%- similarItems[i].picture %> " /> </a>
<%} %>
<div class="card">
<div class="infoTitle">Similar Items</div>
<div class='miniSearchItem'>
<% for (var i = 0; i < similarItems.length; i++) { %>
<% if (!similarItems[i].picture) { %>
<% if (!similarItems[i].uuid) { %>
<img class="miniItemImg faded" src="noImg.png" id='miniImg<%- i %>' />
<% }else{ %>
<a href="/<%- similarItems[i].uuid %>"> <img class="miniItemImg" src="noImg.png" id='miniImg<%- i %>'/> </a>
<%}%>
<% } else{ %>
<% if (!similarItems[i].uuid) { %>
<img class="miniItemImg faded" src=" <%- similarItems[i].picture %> " id='miniImg<%- i %>'/>
<% }else{ %>
<a href="/<%- similarItems[i].uuid %>"> <img class="miniItemImg" src=" <%- similarItems[i].picture %> " id='miniImg<%- i %>'/> </a>
<% } %>
</div>
<% } %>
<% } %>
</article>
<%}%>
<article class="well col-xs-12">
<h2>Details</h2>
</div>
</div>
<% } %>
<article class="card">
<div class="infoTitle">Details</div>
<%- details %>
<ul>
<li>model: <%- model %></li>
Expand Down
30 changes: 13 additions & 17 deletions views/qrList.ejs
Original file line number Diff line number Diff line change
@@ -1,22 +1,18 @@
<% include ./partials/header %>
<div class="col-xs-12">
<% for ( var i = 0; i < matches.length; i++) {%>
<div class="stickers col-xs-3">
<div class="col-xs-12">
<%- matches[i].floor.toLowerCase() %> >
<%- matches[i].room.toLowerCase() %> >
<%- matches[i].location.toLowerCase() %> >
<%- matches[i].fixture.toLowerCase() %>
</div>
<div class="col-xs-12">
<div class="resultContainer">
<center>
<% for ( var i = 0; i < matches.length; i++) {%>
<div class="sticker">
<div class="breadcrumbs">
<%- matches[i].floor %> >
<%- matches[i].room %> >
<%- matches[i].location %> >
<%- matches[i].fixture %>
</div>
<%- matches[i].qr %>
<%- matches[i].uuid %>
</div>
<div class="col-xs-12">
<center>
<%- matches[i].uuid %>
</center>
</div>
</div>
<% } %>
<% } %>
</center>
</div>
<% include ./partials/footer %>
6 changes: 3 additions & 3 deletions views/recent.ejs
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<% include ./partials/header %>
<div class="resultContainer col-xs-12">
<h1>Recently scanned QR code</h1>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

why so picky about custom styling?

<article class="col-xs-12">
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

what does "sub" means?

<div class="resultContainer">
<h2 style="padding: 5px">Recently scanned QR codes</h2>
<article class="subCard">
<ul class='recent-list'>
<% for(var i = 0; i <allScans.length; i++){%>
<% if(allScans[i].fixture) { %>
Expand Down
2 changes: 1 addition & 1 deletion views/search.ejs
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<% include ./partials/header %>
<div class="resultContainer col-xs-12">
<div class="resultContainer">
<% matches.forEach(function(el) { %>
<%- include('./partials/itemCards', el); %>
<% }) %>
Expand Down