Skip to content
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.

Sign up for GitHub

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

Jump to bottom

Visual Overhaul using BEM naming convention #39

Closed
wants to merge 36 commits into from
Closed

Visual Overhaul using BEM naming convention #39

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
36 commits
Select commit Hold shift + click to select a range
447182b
Redesign some components
Mar 22, 2019
ee94b43
Redesign some components
Mar 22, 2019
5099a6d
Redesign some components
Mar 22, 2019
31ebd2c
Revert back to 640
Mar 22, 2019
a1849e3
Visual Overhaul
Mar 22, 2019
a545aab
Visual Overhaul
Mar 22, 2019
905f3df
Visual Overhaul
Mar 22, 2019
cc0555b
Visual Overhaul
Mar 22, 2019
10a61fe
Fixed note *
Mar 22, 2019
dd17271
Visual Overhaul
Mar 22, 2019
ac28302
Visual Overhaul
Mar 22, 2019
a2c8663
Fixed some classes
Mar 22, 2019
f3ddbfa
Theme color changes and fixes
Mar 23, 2019
01c0662
Theme color and fix classes
Mar 23, 2019
c740da4
mobile navigation v1
Mar 23, 2019
f6b9037
mobile navigation v1
Mar 23, 2019
1e93d78
mobile navigation v1
Mar 23, 2019
848f25d
removed nav_v1.js, using css instead
Mar 24, 2019
e982ce5
replace style.css to app.css
Mar 24, 2019
a01edd4
BEM naming convention
Mar 24, 2019
c8a4395
Fallback version for IE and below
Mar 24, 2019
b4e440c
Adjust navigation and notification thickness
Mar 24, 2019
da975c7
Add some important updates
Mar 24, 2019
c229097
Adjust font size for readability
Mar 24, 2019
fe29637
Fixed typo errors
Mar 24, 2019
846c6ea
Clean up classes
Mar 25, 2019
9fb4d5f
Clean up code and adjusments
Mar 25, 2019
ffac272
Style update for search, results list, anime info
Mar 25, 2019
a3c3527
Style update for search, results list, info
Mar 25, 2019
6e993c7
update gitignore
Mar 25, 2019
419349f
add /.vscode/ in gitignore
Mar 27, 2019
ad3c243
Update stylesheet to LESS
Mar 27, 2019
4054f21
add terms in sitemap.txt
Mar 27, 2019
37c3d21
change css link to app.min.css
Mar 27, 2019
2a6ab91
update classes and design
Mar 27, 2019
9443816
update classes, texts, indentions, divs
Mar 27, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
89 changes: 80 additions & 9 deletions css/index.css
View file
Open in desktop
Expand Up @@ -7,7 +7,6 @@ a {
}

canvas {
border: 1px solid #ccc;
background-color: #FFF;
}

Expand Down Expand Up @@ -75,6 +74,7 @@ td:nth-child(3) {
#preview {
display: block;
cursor: default;
width: 642px;
This conversation was marked as resolved.
Show resolved Hide resolved
}

#image_url_lge {
Expand Down Expand Up @@ -182,20 +182,20 @@ td:nth-child(3) {
margin-top: 10px;
}


#main, #results-list, #info {
display: inline-block;
margin: 10px;
margin: 10px;
}

#main {
position: relative;
width: 642px;
margin-bottom: 1em;
background-color: rgba(255, 255, 255, 1);
color: #333;
box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.3);
font-family: Helvetica, Arial, Meiryo, "Microsoft JhengHei", "Microsoft YaHei", sans-serif;
box-shadow: rgba(0, 0, 0, 0.25) 0px 1px 3px 0px;
This conversation was marked as resolved.
Show resolved Hide resolved
font-family: 'Segoe UI', Roboto, Helvetica, Arial, Meiryo, "Microsoft JhengHei", "Microsoft YaHei", sans-serif;
}

#form {
Expand All @@ -204,18 +204,89 @@ td:nth-child(3) {
width: 100%;
}

#main .btn {
text-shadow: none;
box-shadow: 0;
border: 1px solid rgba(0,0,0,0.15);
border-radius: 4px;
transition: all 0.15s ease-in-out;
padding: 10px 10px !important;
line-height: 20px;
transform: translateY(-2px);
}

#searchBtn {
font-weight: 700;
background: #2f3647;
background-image: linear-gradient(to bottom, rgba(255,255,255,0.05), rgba(255,255,255,0));
}

#main .btn:hover:not([disabled]),
#main .btn:focus:not([disabled]),
#searchBtn:hover:not([disabled]) {
color: #fff;
background: #3f4960;
background-image: linear-gradient(to bottom, rgba(255,255,255,0.05), rgba(255,255,255,0));
box-shadow: rgba(0, 0, 0, 0.25) 0px 1px 3px 0px;
}

#main .btn.disabled,
#main .btn[disabled] {
cursor: default !important;
cursor: not-allowed !important;
}

#main input {
border: 1px solid rgba(0,0,0,0.15);
border-radius: 4px;
box-shadow: none;
padding: 20px 10px;
line-height: 20px;
}

#main input#imageURL {
margin: 12px 0 !important;
}

#main input:focus {
box-shadow: 0 7px 14px rgba(0,0,0,0.07),0 3px 6px rgba(0,0,0,0.08);
}

#main .alert {
margin: auto;
border: 0;
border-radius: 0;
text-align: center;
}

#main .alert a {
font-size: 15px;
}

#main .main-footer {
margin-top: 15px;
border-top: 1px solid rgba(139,156,174,0.3);
padding: 1.2rem 0;
text-align: center;
text-shadow: none !important;
}

#main .main-footer__warning {
color: #EA0000;
}

#main .main-filesource {
height: 15px;
border-top: 1px solid rgba(139,156,174,0.3);
box-shadow: rgba(139,156,174,0.1) 0px -40px 40px;
}

#results-list {
float: left;
width: 642px;
background-color: rgba(255, 255, 255, 1);
color: #333;
box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.3);
font-family: Helvetica, Arial, Meiryo, "Microsoft JhengHei", "Microsoft YaHei", sans-serif;
box-shadow: rgba(0, 0, 0, 0.25) 0px 1px 3px 0px;
font-family: 'Segoe UI', Roboto, Helvetica, Arial, Meiryo, "Microsoft JhengHei", "Microsoft YaHei", sans-serif;
}

@media (min-width: 1020px) {
Expand Down Expand Up @@ -246,15 +317,15 @@ td:nth-child(3) {
z-index: 6;
background-color: rgba(255, 255, 255, 1);
color: #333;
box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.3);
display: none;
visibility: hidden;
opacity: 0;
transition: visibility 100ms ease-out, opacity 100ms ease-out !important;
font-size: 0.9em;
line-height: 1.5em;
padding: 1em;
font-family: Helvetica, Arial, Meiryo, "Microsoft JhengHei", "Microsoft YaHei", sans-serif;
box-shadow: rgba(0, 0, 0, 0.25) 0px 1px 3px 0px;
font-family: 'Segoe UI', Roboto, Helvetica, Arial, Meiryo, "Microsoft JhengHei", "Microsoft YaHei", sans-serif;
}

#info #naturalText,
Expand Down
55 changes: 41 additions & 14 deletions css/style.css
View file
Open in desktop
Expand Up @@ -4,9 +4,10 @@ html {
}
body {
margin-bottom: 60px;
background-color: #f9f9fb;
/* background-color: #f9f9fb; */
background: #fff;
text-shadow: 1px 1px 3px #ccc;
font-family: Helvetica, Arial, Meiryo, "Microsoft JhengHei", "Microsoft YaHei", sans-serif;
font-family: 'Segoe UI', Roboto, Helvetica, Arial, Meiryo, "Microsoft JhengHei", "Microsoft YaHei", sans-serif;
}
a {
color: #006cca;
Expand All @@ -16,37 +17,63 @@ a {
}
.navbar{
margin-bottom: 0;
border: 0;
height: 75px;
}
.header{
background-color: #60738B;
background: rgba(34,35,40,0.9);
background-image: linear-gradient(to bottom, rgba(34,35,40,0) 0%, rgba(34,35,40,0.4) 100%),linear-gradient(to right, rgba(34,35,40,0.4) 0%, rgba(34,35,40,0) 50%, rgba(34,35,40,0.4) 100%);
border-radius: 0;
}
.header .nav:hover a:not(.active):not(:hover){
opacity: 0.6;
}
.header a{
color:#FFF;
transition: background-color 0.2s ease-out;
font-size: 12px;
font-weight: 700;
line-height: 75px !important;
padding: 0 !important;
padding-left: 20px !important;
padding-right: 20px !important;
color:#fff;
text-transform: uppercase;
text-shadow: none;
transition: opacity 0.2s linear;
}
.header .active{
color: #CCC;
background-color: #485667;
transition: background-color 0.2s ease-out;
opacity: 1;
background-color: rgba(255,255,255,0.05);
transition: opacity 0.2s linear;
}
.header li>a:hover{
background-color: #485667;
transition: background-color 0.2s ease-out;
.header li>a:hover,.header li>a:focus{
opacity: 1;
background-color: rgba(255,255,255,0.05);
transition: opacity 0.2s linear;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px;
background-color: #60738B;
height: auto;
border-top: 1px solid rgba(139,156,174,0.3);
}
.footer .breadcrumb{
background-color: inherit;
text-align: center;
margin: 0;
}
.footer .breadcrumb li:before{
display: none;
}
.footer .breadcrumb a{
color:#FFF;
display: block;
font-size: 13px;
font-weight: 600;
text-shadow: none !important;
color:rgb(139, 156, 174);
line-height: 38px;
padding: 0 5px;
margin: 0 4px;
}

.container {
Expand Down
19 changes: 10 additions & 9 deletions index.php
View file
Open in desktop
Expand Up @@ -80,18 +80,18 @@
</nav>

<div id="main">
<div class="alert alert-info" style="margin: auto; box-shadow: 0 0 20px 0px;">
<div class="alert alert-info">
<a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
<a href="https://www.patreon.com/posts/24430008">Read Recent updates to trace.moe on Patreon!</a>
</div>
<div class="noselect">
<div id="loading" class="hidden">
<div id="loader" class="ripple"></div>
</div>
<canvas id="preview" width="640" height="360"></canvas>
<canvas id="preview" width="642" height="360"></canvas>
soruly marked this conversation as resolved.
Show resolved Hide resolved
<video id="player" style="display:none" volume="0.5" autoplay></video>
</div>
<div style="height: 15px">
<div class="main-filesource">
<span id="progressBarControl" class="glyphicon glyphicon-triangle-top"></span>
<span id="fileNameDisplay"></span>
<span id="timeCodeDisplay"></span>
Expand All @@ -100,10 +100,10 @@
<span class="btn btn-default btn-file btn-sm">
Browse a file <input type="file" id="file" name="files[]" />
</span>
<span id="instruction"> / Drag &amp; Drop Anime ScreenShot / Ctrl+V / Enter Image URL</span>
<button id="flipBtn" type="button" class="btn btn-default btn-sm" disabled>
<span class="glyphicon glyphicon-unchecked"></span> Flip Image
</button>
<span id="instruction"> / Drag &amp; Drop Anime ScreenShot / Ctrl+V / Enter Image URL</span>
<br>
<form method="post">
<input type="url" pattern="https?://.+" name="imageURL" class="form-control" id="imageURL" placeholder="Image URL" value="<?php echo $imageURL; ?>" style="margin:5px 0 5px 0">
Expand All @@ -112,7 +112,7 @@
<div style="text-align: right">
<span id="messageText" style="float:left;line-height:30px"></span>
<label for="seasonSelector" style="font-weight: inherit">Search in (anilist ID):</label>
<input type="text" id="seasonSelector" class="form-control input-sm" style="display:inline-block; width:100px">
<input type="text" id="seasonSelector" class="form-control input-sm" style="display:inline-block; width:100px" placeholder="anilist ID">

<button id="safeBtn" type="button" class="btn btn-default btn-sm">
<span class="glyphicon glyphicon-unchecked"></span> Safe Search
Expand All @@ -121,8 +121,10 @@
<span class="glyphicon glyphicon-search"></span> Search
</button>
</div>
<span style="color:#EA0000">Caution: some results may be NSFW (Not Safe for Work).</span><br>
<a href="https://telegram.me/WhatAnimeBot">Official Telegram Bot</a> | Official WebExtension for <a href="https://chrome.google.com/webstore/detail/search-anime-by-screensho/gkamnldpllcbiidlfacaccdoadedncfp">Chrome</a>, <a href="https://addons.mozilla.org/en-US/firefox/addon/search-anime-by-screenshot/">Firefox</a>, and <a href="https://addons.opera.com/en/extensions/details/search-anime-by-screenshot/">Opera</a><br>
</div>
<div class="main-footer">
<span class="main-footer__warning">Caution: Some results may be NSFW (Not Safe for Work)</span><br>
<span class="main-footer__extension"><a href="https://telegram.me/WhatAnimeBot">Official Telegram Bot</a> | Official WebExtension for <a href="https://chrome.google.com/webstore/detail/search-anime-by-screensho/gkamnldpllcbiidlfacaccdoadedncfp">Chrome</a>, <a href="https://addons.mozilla.org/en-US/firefox/addon/search-anime-by-screenshot/">Firefox</a>, and <a href="https://addons.opera.com/en/extensions/details/search-anime-by-screenshot/">Opera</a><br></span>
</div>
</div>

Expand All @@ -136,11 +138,10 @@
<ul id="results" class="nav nav-pills nav-stacked"></ul>
</div>


<div id="info"></div>

<a href="https://github.com/soruly/trace.moe" class="github-corner" aria-label="View source on Github">
<svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg>
<svg width="75" height="75" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg>
</a>
<style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>

Expand Down
2 changes: 1 addition & 1 deletion js/info_v3.js
View file
Open in desktop
Expand Up @@ -265,7 +265,7 @@ var displayInfo = function (src) {
br4.style = "clear:both";
document.querySelector("#info").appendChild(br4);
var h33 = document.createElement("h3");
h33.innerText = "Synopses";
h33.innerText = "Synopsis";
document.querySelector("#info").appendChild(h33);
var div5 = document.createElement("div");
div5.style = "clear:both; border-bottom:1px solid #666; margin-bottom:3px";
Expand Down