mirror of
https://github.com/thedevs-network/kutt-extension.git
synced 2026-02-03 13:53:23 +00:00
UI improvements and tunings
This commit is contained in:
abhijithvijayan
@@ -10,7 +10,7 @@
|
||||
<body>
|
||||
<div id="buttonDiv"></div>
|
||||
<div>
|
||||
<p>Choose a different background color!</p>
|
||||
<p>Contents here</p>
|
||||
</div>
|
||||
|
||||
<script src="js/options.js"></script>
|
||||
|
||||
@@ -12,23 +12,36 @@
|
||||
<div class="container">
|
||||
<nav class="navbar">
|
||||
<ul class="navbar__main">
|
||||
<li>
|
||||
<img class="main__logo" src="assets/logo.png" width="30" height="30">
|
||||
<li class="logo__content--holder">
|
||||
<img class="main__logo" src="assets/logo.png">
|
||||
</li>
|
||||
<li>
|
||||
<a href="options.html" target="_blank" rel="noopener"><img class="settings__logo" src="assets/settings.svg" width="20" height="20"></a>
|
||||
<li class="github__content-holder">
|
||||
<a href="https://github.com/abhijithvijayan/kuttUrl-Chrome/" target="_blank" rel="noopener">
|
||||
<img class="github__logo" src="assets/github.svg"></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://github.com/abhijithvijayan/kuttUrl-Chrome/" target="_blank" rel="noopener"><img class="github__logo" src="assets/github.svg" width="20" height="20"></a>
|
||||
<li class="options__content-holder">
|
||||
<a href="options.html" target="_blank" rel="noopener">
|
||||
<img class="settings__logo" src="assets/settings.svg"></a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<h3 id="text">Shortening...</h3>
|
||||
<div><button id="button__copy" style="display: none;">Copy</button></div>
|
||||
<div><button id="button__details" style="display: none;">Details</button></div>
|
||||
<div><button id="button__qrcode" style="display: none;">QR Code</button></div>
|
||||
<div><img id="qr_code" src="#" alt="QRCode" style="display: none;"/></div>
|
||||
<div class="content__holder">
|
||||
<div class="url__content--holder">
|
||||
<h4 id="url__content-inner">Shortening...</h4>
|
||||
</div>
|
||||
<div class="copy__content--holder">
|
||||
<button id="button__copy" style="display: none;">Copy</button>
|
||||
</div>
|
||||
<div class="details__content--holder">
|
||||
<button id="button__details" style="display: none;">Details</button>
|
||||
</div>
|
||||
<div class="qrbtn__content--holder">
|
||||
<button id="button__qrcode" style="display: none;">QR Code</button>
|
||||
</div>
|
||||
<div class="qrcode__content--holder">
|
||||
<img id="qr_code" src="#" alt="QRCode" style="display: none;" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
@@ -2,12 +2,12 @@ import axios from "axios";
|
||||
|
||||
async function getShortURL(URLtoShorten) {
|
||||
let shortLink;
|
||||
const api_url = 'https://kutt.it/api/url/submit';
|
||||
const API_key = "????????????????????????????????????";
|
||||
try {
|
||||
const rawData = await axios({
|
||||
method: "POST",
|
||||
url:
|
||||
"https://kutt.it/api/url/submit",
|
||||
url: api_url,
|
||||
headers: {
|
||||
'X-API-Key': API_key
|
||||
},
|
||||
@@ -15,7 +15,7 @@ async function getShortURL(URLtoShorten) {
|
||||
});
|
||||
shortLink = rawData.data.shortUrl;
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
console.log(error);
|
||||
}
|
||||
// returns the promise
|
||||
return shortLink;
|
||||
|
||||
@@ -12,7 +12,7 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
// store the shortened link
|
||||
shortUrl = response.shortUrl;
|
||||
// update the content with shortened link
|
||||
document.getElementById('text').textContent = shortUrl;
|
||||
document.getElementById('url__content-inner').textContent = shortUrl;
|
||||
// fetch qrcode from http://goqr.me
|
||||
document.getElementById('qr_code').src = `${qrSrc}${shortUrl}`;
|
||||
// show buttons
|
||||
@@ -21,7 +21,7 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
show('button__qrcode');
|
||||
});
|
||||
} else {
|
||||
document.getElementById('text').textContent = 'Not Valid URL!!';
|
||||
document.getElementById('url__content-inner').textContent = 'Not Valid URL!!';
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
@@ -1,132 +0,0 @@
|
||||
/*
|
||||
* Gridism
|
||||
* A simple, responsive, and handy CSS grid by @cobyism
|
||||
* https://github.com/cobyism/gridism
|
||||
*/
|
||||
|
||||
/* Preserve some sanity */
|
||||
.grid,
|
||||
.unit {
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Set up some rules to govern the grid */
|
||||
.grid {
|
||||
display: block;
|
||||
clear: both;
|
||||
}
|
||||
.grid .unit {
|
||||
float: left;
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
/* This ensures the outer gutters are equal to the (doubled) inner gutters. */
|
||||
.grid .unit:first-child { padding-left: 20px; }
|
||||
.grid .unit:last-child { padding-right: 20px; }
|
||||
|
||||
/* Nested grids already have padding though, so let's nuke it */
|
||||
.unit .unit:first-child { padding-left: 0; }
|
||||
.unit .unit:last-child { padding-right: 0; }
|
||||
.unit .grid:first-child > .unit { padding-top: 0; }
|
||||
.unit .grid:last-child > .unit { padding-bottom: 0; }
|
||||
|
||||
/* Let people nuke the gutters/padding completely in a couple of ways */
|
||||
.no-gutters .unit,
|
||||
.unit.no-gutters {
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
/* Wrapping at a maximum width is optional */
|
||||
.wrap .grid,
|
||||
.grid.wrap {
|
||||
max-width: 978px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* Width classes also have shorthand versions numbered as fractions
|
||||
* For example: for a grid unit 1/3 (one third) of the parent width,
|
||||
* simply apply class="w-1-3" to the element. */
|
||||
.grid .whole, .grid .w-1-1 { width: 100%; }
|
||||
.grid .half, .grid .w-1-2 { width: 50%; }
|
||||
.grid .one-third, .grid .w-1-3 { width: 33.3332%; }
|
||||
.grid .two-thirds, .grid .w-2-3 { width: 66.6665%; }
|
||||
.grid .one-quarter,
|
||||
.grid .one-fourth, .grid .w-1-4 { width: 25%; }
|
||||
.grid .three-quarters,
|
||||
.grid .three-fourths, .grid .w-3-4 { width: 75%; }
|
||||
.grid .one-fifth, .grid .w-1-5 { width: 20%; }
|
||||
.grid .two-fifths, .grid .w-2-5 { width: 40%; }
|
||||
.grid .three-fifths, .grid .w-3-5 { width: 60%; }
|
||||
.grid .four-fifths, .grid .w-4-5 { width: 80%; }
|
||||
.grid .golden-small, .grid .w-g-s { width: 38.2716%; } /* Golden section: smaller piece */
|
||||
.grid .golden-large, .grid .w-g-l { width: 61.7283%; } /* Golden section: larger piece */
|
||||
|
||||
/* Clearfix after every .grid */
|
||||
.grid {
|
||||
*zoom: 1;
|
||||
}
|
||||
.grid:before, .grid:after {
|
||||
display: table;
|
||||
content: "";
|
||||
line-height: 0;
|
||||
}
|
||||
.grid:after {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
/* Utility classes */
|
||||
.align-center { text-align: center; }
|
||||
.align-left { text-align: left; }
|
||||
.align-right { text-align: right; }
|
||||
.pull-left { float: left; }
|
||||
.pull-right { float: right; }
|
||||
|
||||
/* A property for a better rendering of images in units: in
|
||||
this way bigger pictures are just resized if the unit
|
||||
becomes smaller */
|
||||
.unit img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
/* Hide elements using this class by default */
|
||||
.only-on-mobiles {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* Responsive Stuff */
|
||||
@media screen and (max-width: 568px) {
|
||||
/* Stack anything that isn't full-width on smaller screens
|
||||
and doesn't provide the no-stacking-on-mobiles class */
|
||||
.grid:not(.no-stacking-on-mobiles) > .unit {
|
||||
width: 100% !important;
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
}
|
||||
.unit .grid .unit {
|
||||
padding-left: 0px;
|
||||
padding-right: 0px;
|
||||
}
|
||||
|
||||
/* Sometimes, you just want to be different on small screens */
|
||||
.center-on-mobiles {
|
||||
text-align: center !important;
|
||||
}
|
||||
.hide-on-mobiles {
|
||||
display: none !important;
|
||||
}
|
||||
.only-on-mobiles {
|
||||
display: block !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Expand the wrap a bit further on larger screens */
|
||||
@media screen and (min-width: 1180px) {
|
||||
.wider .grid,
|
||||
.grid.wider {
|
||||
max-width: 1180px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
@@ -1,69 +0,0 @@
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
h1 { font-size: 1.75em; }
|
||||
h2 { font-size: 1.5em; }
|
||||
h3 { font-size: 1.25em; }
|
||||
h4 { font-size: 1.10em; }
|
||||
h5 { font-size: 1em; }
|
||||
h6 { font-size: .85em; }
|
||||
|
||||
nav {
|
||||
margin: 1em 0;
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
margin-right: 1em;
|
||||
margin-bottom: .25em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ul, ol {
|
||||
margin-top: 0;
|
||||
padding-top: 0;
|
||||
padding-left: 2.5em;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 1em 0;
|
||||
hyphens: auto;
|
||||
|
||||
&.lead {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
+ ul, + ol {
|
||||
margin-top: -.75em;
|
||||
}
|
||||
}
|
||||
|
||||
dd {
|
||||
margin-bottom: 1em;
|
||||
margin-left: 0;
|
||||
padding-left: 2.5em;
|
||||
}
|
||||
|
||||
dt {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
margin: 0;
|
||||
padding-left: 2.5em;
|
||||
}
|
||||
@@ -1,42 +0,0 @@
|
||||
// http://meyerweb.com/eric/tools/css/reset/
|
||||
// v2.0 | 20110126
|
||||
// License: none (public domain)
|
||||
|
||||
html, body, div, span, applet, object, iframe,
|
||||
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
||||
a, abbr, acronym, address, big, cite, code,
|
||||
del, dfn, em, img, ins, kbd, q, s, samp,
|
||||
small, strike, strong, sub, sup, tt, var,
|
||||
b, u, i, center,
|
||||
dl, dt, dd, ol, ul, li,
|
||||
fieldset, form, label, legend,
|
||||
table, caption, tbody, tfoot, thead, tr, th, td,
|
||||
article, aside, canvas, details, embed,
|
||||
figure, figcaption, footer, header, hgroup,
|
||||
menu, nav, output, ruby, section, summary,
|
||||
time, mark, audio, video {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
// HTML5 display-role reset for older browsers
|
||||
article, aside, details, figcaption, figure,
|
||||
footer, header, hgroup, menu, nav, section {
|
||||
display: block;
|
||||
}
|
||||
ol, ul {
|
||||
list-style: none;
|
||||
}
|
||||
blockquote, q {
|
||||
quotes: none;
|
||||
}
|
||||
blockquote:before, blockquote:after,
|
||||
q:before, q:after {
|
||||
content: '';
|
||||
content: none;
|
||||
}
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
@@ -1,7 +1,4 @@
|
||||
@import "modules/reset";
|
||||
@import "modules/variables";
|
||||
@import "modules/grid";
|
||||
@import "modules/layout";
|
||||
@import "variables";
|
||||
|
||||
body {
|
||||
color: $color-black;
|
||||
|
||||
@@ -1,29 +1,87 @@
|
||||
@import "modules/reset";
|
||||
@import "modules/variables";
|
||||
@import "modules/layout";
|
||||
@import "variables";
|
||||
|
||||
html, body {
|
||||
padding: 0;
|
||||
border: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
color: $color-black;
|
||||
width: 13em;
|
||||
min-width: 14em;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 80%;
|
||||
margin: 10px 10%;
|
||||
}
|
||||
|
||||
ul {
|
||||
padding-left: 0;
|
||||
li {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar__main {
|
||||
.main__logo {
|
||||
float: left;
|
||||
}
|
||||
.settings__logo {
|
||||
margin-left: auto;
|
||||
#home {
|
||||
width: 180px;
|
||||
.container {
|
||||
width: 88%;
|
||||
margin: 10px 6%;
|
||||
.navbar {
|
||||
.navbar__main {
|
||||
margin-bottom: 0px;
|
||||
padding-left: 0;
|
||||
list-style-type: none;
|
||||
li {
|
||||
display: inline-block;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.logo__content--holder {
|
||||
.main__logo {
|
||||
width: 23px;
|
||||
height: 23px;
|
||||
}
|
||||
}
|
||||
.options__content-holder {
|
||||
float: right;
|
||||
padding: 0 10px;
|
||||
.settings__logo {
|
||||
width: 17px;
|
||||
height: 17px;
|
||||
}
|
||||
}
|
||||
.github__content-holder {
|
||||
float: right;
|
||||
.github__logo {
|
||||
width: 17px;
|
||||
height: 17px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.content__holder {
|
||||
.url__content--holder {
|
||||
margin: 1em 0;
|
||||
#url__content-inner {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
.copy__content--holder,
|
||||
.details__content--holder,
|
||||
.qrbtn__content--holder {
|
||||
margin-bottom: 0.3em;
|
||||
}
|
||||
.copy__content--holder {
|
||||
#button__copy {
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
.details__content--holder {
|
||||
#button__details {
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
.qrbtn__content--holder {
|
||||
#button__qrcode {
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
.qrcode__content--holder {
|
||||
#qr_code {
|
||||
padding-top: 0.3em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user