javascript - html 响应式文本区域/按钮/表格
问题描述
我正在使用正文内容中包含文本区域/按钮/表格的网站。
我的内容反应灵敏,除了非常薄的显示器(如移动设备),在这种情况下,表格不会换行并变得不可用,并且按钮不会扩展以填充整个区域。
(行内代码元素似乎不太好,但这个 jsfiddle 是一个更好的例子)
https://jsfiddle.net/martinradio/b4z735tk/40/
如何使表格更具响应性,以便在调整窗口大小时,表格具有类似于 textarea 的某种自动换行(如滚动)
button {
border: 2px solid black;
}
table, th, td {
border: 2px solid black;
background: white;
color:black;
height: 100%;
}
table {
table-layout:fixed;
width:100%;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel='icon' href='https://cdn4.iconfinder.com/data/icons/48-bubbles/48/06.Tags-512.png' type='image/x-icon' />
<title>tagger.site</title>
<!-- jQuery CDN - Slim version (=without AJAX) -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<!-- Popper.JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<!-- Bootstrap JS -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
<!-- bootstrap css-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<!-- font-awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<!-- Style -->
<style>
@import "https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700";
body {
font-family: 'Poppins', sans-serif;
}
/*
#sidebar ul li a:hover { background: rgb(6, 255, 193); color: rgb(247, 1, 255); } `;
*/
p {
font-family: 'Poppins', sans-serif;
font-size: 1.1em;
font-weight: 300;
line-height: 1.7em;
color: #999;
}
.btn-info {
color: #fff;
background-color: #b81717;
border-color: #52b817;
}
a,
a:hover,
a:focus {
color: inherit;
text-decoration: none;
transition: all 0.3s;
}
.navbar {
/*
padding: 15px 10px;
margin-right: 77px;
*/
/* background: rgb(11, 223, 212); */
border: none;
border-radius: 0;
margin-bottom: 40px;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
margin-left:11px
}
.navbar-btn {
box-shadow: none;
outline: none !important;
border: none;
}
.line {
width: 100%;
height: 1px;
border-bottom: 1px dashed #ddd;
margin: 40px 0;
}
/* ---------------------------------------------------
SIDEBAR STYLE
----------------------------------------------------- */
.wrapper {
display: flex;
width: 100%;
align-items: stretch;
}
#sidebar {
min-width: 250px;
max-width: 250px;
/* background: #63c23e; NAVBAR BACKGROUND */
color: rgb(0, 0, 0);
transition: all 0.3s;
}
#sidebar.active {
margin-left: -250px;
}
#sidebar .sidebar-header {
display: inline-flex;
padding: 20px;
/* background: #6d7fcc; */
position: relative;
width: 100%;
}
#sidebar ul.components {
/* padding: 20px 0; */
/* border-bottom: 1px solid #47748b; */
}
#sidebar ul p {
color: #fff;
padding: 10px;
}
#sidebar ul li a {
padding: 10px;
font-size: 1.1em;
display: block;
}
a[data-toggle="collapse"] {
position: relative;
}
.dropdown-toggle::after {
display: block;
position: absolute;
top: 50%;
right: 20px;
transform: translateY(-50%);
}
ul ul a {
font-size: 0.9em !important;
padding-left: 30px !important;
}
ul.CTAs {
padding: 20px;
}
ul.CTAs a {
text-align: center;
font-size: 0.9em !important;
display: block;
border-radius: 5px;
margin-bottom: 5px;
}
/* ---------------------------------------------------
CONTENT STYLE
----------------------------------------------------- */
#content {
width: 100%;
padding: 20px;
min-height: 100vh;
transition: all 0.3s;
}
/* ---------------------------------------------------
MEDIAQUERIES
----------------------------------------------------- */
@media (max-width: 768px) {
#sidebar {
margin-left: -250px;
}
#sidebar.active {
margin-left: 0;
}
#sidebarCollapse span {
color: pink
display: inline;
}
}
#imageModal{
z-index:3;
}
/* Sidebar expand/collapse button */
#sidebarCollapse{
position: fixed;
z-index: 2;
margin-left: 84%;
box-shadow: 0px 1px 4px 1px rgba(0 ,0, 0, .3);
border: none;
height: 40px;
width: 40px;
border-radius: 50%;
cursor: pointer;
position: absolute;
}
/* Bottom of sidebar image stuff */
.responsive {
width: 90%;
bottom:20px;
margin-left:5%;
margin-right:5%;
}
/* image footer color text center */
.sidebar-footer{
text-align: center;
font-size: 1.1rem;
/*font-family:'Consolas' */
}
/* image footer color boxes */
.colorBox {
/*float: left;*/
width: 20px;
height: 20px;
margin: 5px;
border: 1px solid rgba(0, 0, 0, .2);
vertical-align: middle;
display: inline-block;
}
</style>
<style>
/* Style the Image Used to Trigger the Modal */
#colorImageDisplay {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}
#colorImageDisplay:hover {opacity: 0.7;}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}
/* Modal Content (Image) */
.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
}
/* Caption of Modal Image (Image Text) - Same Width as the Image */
#caption {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
}
/* Add Animation - Zoom in the Modal */
.modal-content, #caption {
animation-name: zoom;
animation-duration: 0.6s;
}
@keyframes zoom {
from {transform:scale(0)}
to {transform:scale(1)}
}
/* The Close Button */
.close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
.modal-content {
width: 100%;
}
}
</style>
<!-- Page Content -->
<div class="wrapper" class="toggled">
<!-- Sidebar -->
<nav id="sidebar" style='background: #f8f0e8; color:#000000;'>
<!-- sidenav top title -->
<div id='sidebarTop' class="sidebar-header" style='background: #513e2a'>
<!-- sidebar top title text -->
<h3 style='color: #ffffff' style='font-weight: bold; text-size:12px'><strong>asdasdr</strong></h3>
<!-- sidebar expand/collapse button -->
<button id='sidebarCollapse'>
<img src="https://img.icons8.com/ios-filled/24/000000/menu.png"/>
</button>
</div>
<!-- sidenav list of items -->
<ul class="list-unstyled components sideBarOption" style='background: #180d04; color: #ffffff;'>
<!-- about page -->
<li>
<a href="#">About</a>
</li>
</ul>
</nav>
<!-- Page Content -->
<div id="content" style='background: #cec5ac;'>
<div class="col-sm-12">
<div class="col" >
<div class="row" style=' overflow: auto; margin: auto; background: #917e73; color: #ffffff'>
<div class="col" style=''>
<h1 class="widgettitle"><strong>page title</strong></h1>
</div>
<div class="w-100"></div>
<div class="col" style=''>
<a id='githubUrl' target="_blank" href='https://www.youtube.com/watch?v=0df7k__KEHw'>Github</a>
</div>
</div>
</div>
<div class="col" >
<br>
<br>
<div class="row" style=' margin: auto;'>
<!-- page main content -->
<div class="container-fluid" style='color: #000000'>
<div style="margin-top:-30px;">
<!-- discogstagger output -->
<hr>
<h3>Comma-Separated Metadata Tags:</h3>
<div class='outputDiscogstaggerBox' style='margin-left:15px;'>
<div class='row'>
<textarea class="inputbox" id="tagsBox" rows="7" cols="44" placeholder="Booker T. Jones,Priscilla Jones,Booker T & The MGs,The Mar-Keys,The Stax Staff,The Packers,The RCO All-Stars,Priscilla Coolidge,Booker T. & Priscilla,1971,France,The Wedding Song,She,The Indian Song,Sea Gull,For Priscilla,The Delta Song,Why,Mississippi Voodoo,Cool Black Dream,Sweet Child Youre Not Alone,Booker T. & Priscilla 1971,Booker T. Jones 1971,"></textarea>
<button class="btn default copyButton" style="cursor: pointer;" id='copyToClipboarad' onclick="copyToClipboard('#inputBox')" type="button">Copy</button>
<div>
<table class="fixed h-100" align="left" style="white-space:nowrap; table-layout: fixed; width: 533px; " height="100" id="adjustments">
<tbody>
<!-- Columns -->
<tr>
<th style="text-align:center; width: 6%;"><input type="checkbox" id='selectAll' checked></th>
<th style="text-align:center; width: 25%;">Tags Type</th>
<th style="text-align:center; width: 46%;">Tags</th>
</tr>
<!-- Artists -->
<tr>
<td style="text-align:center;">
<input type="checkbox" class="releaseArtistsCheckbox" id="releaseArtistsCheckbox" checked="" onchange="prepUpdateTagsBox()">
</td>
<td style="text-align:center;">Release Artist(s)</td>
<td>
<div style="text-align:center;">
<input type="range" class="releaseArtistsSlider" id="releaseArtistsSlider" min="0" max="100" value="100" onchange="prepUpdateTagsBox()">
<div class='float-left' id="releaseArtistsSliderValue">100%</div>
<div class='float-right' id='releaseArtistsNumber'>0 chars </div>
</div>
</td>
</tr>
<!-- Release Info -->
<tr>
<td style="text-align:center;">
<input type="checkbox" class="releaseInfoCheckbox" id="releaseInfoCheckbox" checked="" onchange="prepUpdateTagsBox()">
</td>
<td style="text-align:center;">Release Info</td>
<td>
<div style="text-align:center;">
<input type="range" class="releaseInfoSlider" id="releaseInfoSlider" min="0" max="100" value="100" onchange="prepUpdateTagsBox()">
<div class='float-left' id="releaseInfoSliderValue">100%</div>
<div class='float-right' id='releaseInfoNumber'>0 chars</div>
</div>
</td>
</tr>
<!-- Tracklist -->
<tr>
<td style="text-align:center;">
<input type="checkbox" class="tracklistCheckbox" id="tracklistCheckbox" checked="" onchange="prepUpdateTagsBox()">
</td>
<td style="text-align:center;">Tracklist</td>
<td>
<div style="text-align:center;">
<input type="range" class="tracklistSlider" id="tracklistSlider" min="0" max="100" value="100" onchange="prepUpdateTagsBox()">
<div class='float-left' id="tracklistSliderValue">100%</div>
<div class='float-right' id='tracklistNumber'>0 chars</div>
</div>
</td>
</tr>
<!-- Combinations -->
<tr>
<td style="text-align:center;">
<input type="checkbox" class="combinationsCheckbox" id="combinationsCheckbox" checked="" onchange="prepUpdateTagsBox()">
</td>
<td style="text-align:center;">Combinations</td>
<td>
<div style="text-align:center;">
<input type="range" class="combinationsSlider" id="combinationsSlider" min="0" max="100" value="100" onchange="prepUpdateTagsBox()">
<div class='float-left' id="combinationsSliderValue">100%</div>
<div class='float-right' id='combinationsNumber'>0 chars</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
setHoverColor();
//setColors()
async function setHoverColor(){
var sheet = document.createElement('style')
//create css style rule for on-hover tab and on hover github url
let innerHTMLHoverColorStyle = `
/* githubUrl hover */
#githubUrl:hover{
color:blue;
}
#sidebar ul li a:hover {
background: #8c743c;
color: #ffffff;
} `;
sheet.innerHTML = innerHTMLHoverColorStyle
document.head.appendChild(sheet);
}
async function setColors(){
console.log('setcolors()')
let colors = await getColors()
let imgPath = colors.imgPath
//6 possible colors:
//Vibrant
//LightVibrant
//DarkVibrant
//Muted
//LightMuted
//DarkMuted
//get high contrast colors for text
/*
let sidebarColorBackground = colors.colors['DarkVibrant']
console.log("sidebarColorBackground = ", sidebarColorBackground)
sidebarColorBackground = sidebarColorBackground.substring(4, sidebarColorBackground.length-1);
console.log("sidebarColorBackground = ", sidebarColorBackground)
sidebarColorBackground = sidebarColorBackground.split(',');
console.log("sidebarColorBackground = ", sidebarColorBackground)
sidebarColorBackground_hex = rgbToHex(213, 23, 36)
console.log("sidebarColorBackground_hex = ", sidebarColorBackground_hex)
let sidebarColorBackground_text = invertColor(sidebarColorBackground_hex)
console.log("sidebarColorBackground_text = ", sidebarColorBackground_text)
*/
//change color display text and set color box hex value
//make all colors visible
//document.getElementById('pageColorsText').style.display = "block";
/*
//color 1
var color1 = colors.colors['Vibrant']
var color1_hex = rgbToHex(color1)
document.getElementById("color1Hex").innerText = `Color 1: ${color1_hex}`
//color 2
var color2 = colors.colors['LightVibrant']
var color2_hex = rgbToHex(color2)
document.getElementById("color2Hex").innerText = `Color 2: ${color2_hex}`
//color 3
var color3 = colors.colors['DarkVibrant']
var color3_hex = rgbToHex(color3)
document.getElementById("color3Hex").innerText = `Color 3: ${color3_hex}`
//color 4
var color4 = colors.colors['Muted']
var color4_hex = rgbToHex(color4)
document.getElementById("color4Hex").innerText = `Color 4: ${color4_hex}`
//color 5
var color5 = colors.colors['LightMuted']
var color5_hex = rgbToHex(color5)
document.getElementById("color5Hex").innerText = `Color 5: ${color5_hex}`
//color 6
var color6 = colors.colors['DarkMuted']
var color6_hex = rgbToHex(color6)
document.getElementById("color6Hex").innerText = `Color 6: ${color6_hex}`
*/
//change display image source
//document.getElementById('colorImageDisplay').src=`${imgPath}`
//setup image modal popup
//imageModalSetup()
//change colors
var sheet = document.createElement('style')
let hoverColor = `#8c743c`;
let innerHTMLHoverColorStyle = `#sidebar ul li a:hover { background: ${hoverColor}; } `;
sheet.innerHTML = innerHTMLHoverColorStyle
document.head.appendChild(sheet);
let innerHTMLStyle = `
/* main page body background color solid
body { background: red; } */
/* sidebar_header_background_color
#sidebarTop {background: ${colors.colors['LightMuted']};} */
/* sidebar_background_color
#sidebar { background: linear-gradient(0deg, ${colors.colors['LightVibrant']}, ${colors.colors['Muted']}); } */
/* active tab color
#currentPage { background: ${colors.colors['LightVibrant']}; } */
/* main page body background color gradient
body { background: linear-gradient(2deg, color3_hex, color6_hex);} */
/* ul ul a { expanded tab background color
.sideBarOption { background: ${colors.colors['Muted']}; } */
/* sidebar hover color */
#sidebar ul li a:hover { background: ${colors.colors['DarkVibrant']}; } `;
//console.log("innerHTMLStyle = ", innerHTMLStyle)
//sheet.innerHTML = innerHTMLStyle
//document.head.appendChild(sheet);
}
function invertColor(hex) {
if (hex.indexOf('#') === 0) {
hex = hex.slice(1);
}
// convert 3-digit hex to 6-digits.
if (hex.length === 3) {
hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
}
if (hex.length !== 6) {
throw new Error('Invalid HEX color.');
}
// invert color components
var r = (255 - parseInt(hex.slice(0, 2), 16)).toString(16),
g = (255 - parseInt(hex.slice(2, 4), 16)).toString(16),
b = (255 - parseInt(hex.slice(4, 6), 16)).toString(16);
// pad each with zeros and return
return '#' + padZero(r) + padZero(g) + padZero(b);
}
function padZero(str, len) {
len = len || 2;
var zeros = new Array(len).join('0');
return (zeros + str).slice(-len);
}
//rgb to hex
function componentToHex(c) {
var hex = c.toString(16);
return hex.length == 1 ? "0" + hex : hex;
}
function rgbToHex(color) {
//color = string like rgb(a,b,c)
//remove string parts
color = color.substring(4, color.length-1);
//turn into arr
color = color.split(',');
return "#" + componentToHex(parseInt(color[0])) + componentToHex(parseInt(color[1])) + componentToHex(parseInt(color[2]));
}
//setup image modal popup
imageModalSetup()
async function imageModalSetup(){
// Get the modal
var modal = document.getElementById("imageModal");
// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.getElementById("colorImageDisplay");
//make image visible
img.style.display = "block";
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function(){
modal.style.display = "block";
modalImg.src = this.src;
//captionText.innerHTML = this.alt;
}
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
$('#imageModal').fadeOut(500);
}
}
$(document).ready(function () {
//refresh button
const refreshButton = document.getElementById('refreshButton');
const refreshPage = () => {
location.reload();
}
refreshButton.addEventListener('click', refreshPage)
//if clicking outside modal, close modal
$(document).click(function (e) {
console.log('close modal')
if ($(e.target).is('#imageModal')) {
$('#imageModal').fadeOut(500);
}
});
//on escape key click, close modal
$(document).keydown(function(event) {
if (event.keyCode == 27) {
$('#imageModal').fadeOut(500);
}
});
//side bar collapse event
$('#sidebarCollapse').on('click', function () {
$('#sidebar').toggleClass('active');
});
});
//make request to colors backend
function getColors(){
return new Promise(async function (resolve, reject) {
$.ajax({
type: 'POST',
url: '/getColors',
data: {
type: "varValue",
},
}).then((data) => {
resolve(data)
}).catch((err) => {
reject(err)
});
})
}
</script>
</html>
解决方案
我在这里编辑了你的代码:https ://jsfiddle.net/r0bny6h7/
- 为了使表格本身在较小的屏幕上响应,我将 553px 的固定宽度更改为“max-width: 553px”。本质上,这是在较大的屏幕上,确保元素不超过 553px,但在较小的屏幕上,它会自动缩小尺寸以适应屏幕。
- 要在较小的屏幕上展开按钮,只需添加一个 max-width(在本例中为“max-width: 553px”以匹配表格)和“width: 100%”以确保它在较小的屏幕上占据整个宽度.
- 要使表格内容自动换行,只需添加“word-wrap: break-word;”即可 和“空白:正常;” 到桌子上,th,td。
- 只是一个小提示,但是由于您混合了内联和声明性 CSS 样式,因此在代码中导航有点困难。我建议坚持使用一种类型,特别是如果您有将在整个代码中重用的样式(例如,您将“text-align:center”添加到很多表格内容中。您可以通过将其应用于而是整个元素,或者一个特定的类。)
button {
border: 2px solid black;
}
table, th, td {
border: 2px solid black;
background: white;
color:black;
height: 100%;
white-space: normal;
word-wrap: break-word;
}
table {
table-layout:fixed;
width:100%;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel='icon' href='https://cdn4.iconfinder.com/data/icons/48-bubbles/48/06.Tags-512.png' type='image/x-icon' />
<title>tagger.site</title>
<!-- jQuery CDN - Slim version (=without AJAX) -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<!-- Popper.JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<!-- Bootstrap JS -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
<!-- bootstrap css-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<!-- font-awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<!-- Style -->
<style>
@import "https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700";
body {
font-family: 'Poppins', sans-serif;
}
/*
#sidebar ul li a:hover { background: rgb(6, 255, 193); color: rgb(247, 1, 255); } `;
*/
p {
font-family: 'Poppins', sans-serif;
font-size: 1.1em;
font-weight: 300;
line-height: 1.7em;
color: #999;
}
.btn-info {
color: #fff;
background-color: #b81717;
border-color: #52b817;
}
a,
a:hover,
a:focus {
color: inherit;
text-decoration: none;
transition: all 0.3s;
}
.navbar {
/*
padding: 15px 10px;
margin-right: 77px;
*/
/* background: rgb(11, 223, 212); */
border: none;
border-radius: 0;
margin-bottom: 40px;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
margin-left:11px
}
.navbar-btn {
box-shadow: none;
outline: none !important;
border: none;
}
.line {
width: 100%;
height: 1px;
border-bottom: 1px dashed #ddd;
margin: 40px 0;
}
/* ---------------------------------------------------
SIDEBAR STYLE
----------------------------------------------------- */
.wrapper {
display: flex;
width: 100%;
align-items: stretch;
}
#sidebar {
min-width: 250px;
max-width: 250px;
/* background: #63c23e; NAVBAR BACKGROUND */
color: rgb(0, 0, 0);
transition: all 0.3s;
}
#sidebar.active {
margin-left: -250px;
}
#sidebar .sidebar-header {
display: inline-flex;
padding: 20px;
/* background: #6d7fcc; */
position: relative;
width: 100%;
}
#sidebar ul.components {
/* padding: 20px 0; */
/* border-bottom: 1px solid #47748b; */
}
#sidebar ul p {
color: #fff;
padding: 10px;
}
#sidebar ul li a {
padding: 10px;
font-size: 1.1em;
display: block;
}
a[data-toggle="collapse"] {
position: relative;
}
.dropdown-toggle::after {
display: block;
position: absolute;
top: 50%;
right: 20px;
transform: translateY(-50%);
}
ul ul a {
font-size: 0.9em !important;
padding-left: 30px !important;
}
ul.CTAs {
padding: 20px;
}
ul.CTAs a {
text-align: center;
font-size: 0.9em !important;
display: block;
border-radius: 5px;
margin-bottom: 5px;
}
/* ---------------------------------------------------
CONTENT STYLE
----------------------------------------------------- */
#content {
width: 100%;
padding: 20px;
min-height: 100vh;
transition: all 0.3s;
}
/* ---------------------------------------------------
MEDIAQUERIES
----------------------------------------------------- */
@media (max-width: 768px) {
#sidebar {
margin-left: -250px;
}
#sidebar.active {
margin-left: 0;
}
#sidebarCollapse span {
color: pink
display: inline;
}
}
#imageModal{
z-index:3;
}
/* Sidebar expand/collapse button */
#sidebarCollapse{
position: fixed;
z-index: 2;
margin-left: 84%;
box-shadow: 0px 1px 4px 1px rgba(0 ,0, 0, .3);
border: none;
height: 40px;
width: 40px;
border-radius: 50%;
cursor: pointer;
position: absolute;
}
/* Bottom of sidebar image stuff */
.responsive {
width: 90%;
bottom:20px;
margin-left:5%;
margin-right:5%;
}
/* image footer color text center */
.sidebar-footer{
text-align: center;
font-size: 1.1rem;
/*font-family:'Consolas' */
}
/* image footer color boxes */
.colorBox {
/*float: left;*/
width: 20px;
height: 20px;
margin: 5px;
border: 1px solid rgba(0, 0, 0, .2);
vertical-align: middle;
display: inline-block;
}
</style>
<style>
/* Style the Image Used to Trigger the Modal */
#colorImageDisplay {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}
#colorImageDisplay:hover {opacity: 0.7;}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}
/* Modal Content (Image) */
.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
}
/* Caption of Modal Image (Image Text) - Same Width as the Image */
#caption {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
}
/* Add Animation - Zoom in the Modal */
.modal-content, #caption {
animation-name: zoom;
animation-duration: 0.6s;
}
@keyframes zoom {
from {transform:scale(0)}
to {transform:scale(1)}
}
/* The Close Button */
.close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
.modal-content {
width: 100%;
}
}
</style>
<!-- Page Content -->
<div class="wrapper" class="toggled">
<!-- Sidebar -->
<nav id="sidebar" style='background: #f8f0e8; color:#000000;'>
<!-- sidenav top title -->
<div id='sidebarTop' class="sidebar-header" style='background: #513e2a'>
<!-- sidebar top title text -->
<h3 style='color: #ffffff' style='font-weight: bold; text-size:12px'><strong>asdasdr</strong></h3>
<!-- sidebar expand/collapse button -->
<button id='sidebarCollapse'>
<img src="https://img.icons8.com/ios-filled/24/000000/menu.png"/>
</button>
</div>
<!-- sidenav list of items -->
<ul class="list-unstyled components sideBarOption" style='background: #180d04; color: #ffffff;'>
<!-- about page -->
<li>
<a href="#">About</a>
</li>
</ul>
</nav>
<!-- Page Content -->
<div id="content" style='background: #cec5ac;'>
<div class="col-sm-12">
<div class="col" >
<div class="row" style=' overflow: auto; margin: auto; background: #917e73; color: #ffffff'>
<div class="col" style=''>
<h1 class="widgettitle"><strong>page title</strong></h1>
</div>
<div class="w-100"></div>
<div class="col" style=''>
<a id='githubUrl' target="_blank" href='https://www.youtube.com/watch?v=0df7k__KEHw'>Github</a>
</div>
</div>
</div>
<div class="col" >
<br>
<br>
<div class="row" style=' margin: auto;'>
<!-- page main content -->
<div class="container-fluid" style='color: #000000'>
<div style="margin-top:-30px;">
<!-- discogstagger output -->
<hr>
<h3>Comma-Separated Metadata Tags:</h3>
<div class='outputDiscogstaggerBox' style='margin-left:15px;'>
<div class='row'>
<textarea class="inputbox" id="tagsBox" rows="7" cols="44" placeholder="Booker T. Jones,Priscilla Jones,Booker T & The MGs,The Mar-Keys,The Stax Staff,The Packers,The RCO All-Stars,Priscilla Coolidge,Booker T. & Priscilla,1971,France,The Wedding Song,She,The Indian Song,Sea Gull,For Priscilla,The Delta Song,Why,Mississippi Voodoo,Cool Black Dream,Sweet Child Youre Not Alone,Booker T. & Priscilla 1971,Booker T. Jones 1971,"></textarea>
<button class="btn default copyButton" style="cursor: pointer; max-width: 553px; width: 100%;" id='copyToClipboarad' onclick="copyToClipboard('#inputBox')" type="button">Copy</button>
<div>
<table class="fixed h-100" align="left" style="white-space:nowrap; table-layout: fixed; max-width: 533px;" height="100" id="adjustments">
<tbody>
<!-- Columns -->
<tr>
<th style="text-align:center; width: 6%;"><input type="checkbox" id='selectAll' checked></th>
<th style="text-align:center; width: 25%;">Tags Type</th>
<th style="text-align:center; width: 46%;">Tags</th>
</tr>
<!-- Artists -->
<tr>
<td style="text-align:center;">
<input type="checkbox" class="releaseArtistsCheckbox" id="releaseArtistsCheckbox" checked="" onchange="prepUpdateTagsBox()">
</td>
<td style="text-align:center;">Release Artist(s)</td>
<td>
<div style="text-align:center;">
<input type="range" class="releaseArtistsSlider" id="releaseArtistsSlider" min="0" max="100" value="100" onchange="prepUpdateTagsBox()">
<div class='float-left' id="releaseArtistsSliderValue">100%</div>
<div class='float-right' id='releaseArtistsNumber'>0 chars </div>
</div>
</td>
</tr>
<!-- Release Info -->
<tr>
<td style="text-align:center;">
<input type="checkbox" class="releaseInfoCheckbox" id="releaseInfoCheckbox" checked="" onchange="prepUpdateTagsBox()">
</td>
<td style="text-align:center;">Release Info</td>
<td>
<div style="text-align:center;">
<input type="range" class="releaseInfoSlider" id="releaseInfoSlider" min="0" max="100" value="100" onchange="prepUpdateTagsBox()">
<div class='float-left' id="releaseInfoSliderValue">100%</div>
<div class='float-right' id='releaseInfoNumber'>0 chars</div>
</div>
</td>
</tr>
<!-- Tracklist -->
<tr>
<td style="text-align:center;">
<input type="checkbox" class="tracklistCheckbox" id="tracklistCheckbox" checked="" onchange="prepUpdateTagsBox()">
</td>
<td style="text-align:center;">Tracklist</td>
<td>
<div style="text-align:center;">
<input type="range" class="tracklistSlider" id="tracklistSlider" min="0" max="100" value="100" onchange="prepUpdateTagsBox()">
<div class='float-left' id="tracklistSliderValue">100%</div>
<div class='float-right' id='tracklistNumber'>0 chars</div>
</div>
</td>
</tr>
<!-- Combinations -->
<tr>
<td style="text-align:center;">
<input type="checkbox" class="combinationsCheckbox" id="combinationsCheckbox" checked="" onchange="prepUpdateTagsBox()">
</td>
<td style="text-align:center;">Combinations</td>
<td>
<div style="text-align:center;">
<input type="range" class="combinationsSlider" id="combinationsSlider" min="0" max="100" value="100" onchange="prepUpdateTagsBox()">
<div class='float-left' id="combinationsSliderValue">100%</div>
<div class='float-right' id='combinationsNumber'>0 chars</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
setHoverColor();
//setColors()
async function setHoverColor(){
var sheet = document.createElement('style')
//create css style rule for on-hover tab and on hover github url
let innerHTMLHoverColorStyle = `
/* githubUrl hover */
#githubUrl:hover{
color:blue;
}
#sidebar ul li a:hover {
background: #8c743c;
color: #ffffff;
} `;
sheet.innerHTML = innerHTMLHoverColorStyle
document.head.appendChild(sheet);
}
async function setColors(){
console.log('setcolors()')
let colors = await getColors()
let imgPath = colors.imgPath
//6 possible colors:
//Vibrant
//LightVibrant
//DarkVibrant
//Muted
//LightMuted
//DarkMuted
//get high contrast colors for text
/*
let sidebarColorBackground = colors.colors['DarkVibrant']
console.log("sidebarColorBackground = ", sidebarColorBackground)
sidebarColorBackground = sidebarColorBackground.substring(4, sidebarColorBackground.length-1);
console.log("sidebarColorBackground = ", sidebarColorBackground)
sidebarColorBackground = sidebarColorBackground.split(',');
console.log("sidebarColorBackground = ", sidebarColorBackground)
sidebarColorBackground_hex = rgbToHex(213, 23, 36)
console.log("sidebarColorBackground_hex = ", sidebarColorBackground_hex)
let sidebarColorBackground_text = invertColor(sidebarColorBackground_hex)
console.log("sidebarColorBackground_text = ", sidebarColorBackground_text)
*/
//change color display text and set color box hex value
//make all colors visible
//document.getElementById('pageColorsText').style.display = "block";
/*
//color 1
var color1 = colors.colors['Vibrant']
var color1_hex = rgbToHex(color1)
document.getElementById("color1Hex").innerText = `Color 1: ${color1_hex}`
//color 2
var color2 = colors.colors['LightVibrant']
var color2_hex = rgbToHex(color2)
document.getElementById("color2Hex").innerText = `Color 2: ${color2_hex}`
//color 3
var color3 = colors.colors['DarkVibrant']
var color3_hex = rgbToHex(color3)
document.getElementById("color3Hex").innerText = `Color 3: ${color3_hex}`
//color 4
var color4 = colors.colors['Muted']
var color4_hex = rgbToHex(color4)
document.getElementById("color4Hex").innerText = `Color 4: ${color4_hex}`
//color 5
var color5 = colors.colors['LightMuted']
var color5_hex = rgbToHex(color5)
document.getElementById("color5Hex").innerText = `Color 5: ${color5_hex}`
//color 6
var color6 = colors.colors['DarkMuted']
var color6_hex = rgbToHex(color6)
document.getElementById("color6Hex").innerText = `Color 6: ${color6_hex}`
*/
//change display image source
//document.getElementById('colorImageDisplay').src=`${imgPath}`
//setup image modal popup
//imageModalSetup()
//change colors
var sheet = document.createElement('style')
let hoverColor = `#8c743c`;
let innerHTMLHoverColorStyle = `#sidebar ul li a:hover { background: ${hoverColor}; } `;
sheet.innerHTML = innerHTMLHoverColorStyle
document.head.appendChild(sheet);
let innerHTMLStyle = `
/* main page body background color solid
body { background: red; } */
/* sidebar_header_background_color
#sidebarTop {background: ${colors.colors['LightMuted']};} */
/* sidebar_background_color
#sidebar { background: linear-gradient(0deg, ${colors.colors['LightVibrant']}, ${colors.colors['Muted']}); } */
/* active tab color
#currentPage { background: ${colors.colors['LightVibrant']}; } */
/* main page body background color gradient
body { background: linear-gradient(2deg, color3_hex, color6_hex);} */
/* ul ul a { expanded tab background color
.sideBarOption { background: ${colors.colors['Muted']}; } */
/* sidebar hover color */
#sidebar ul li a:hover { background: ${colors.colors['DarkVibrant']}; } `;
//console.log("innerHTMLStyle = ", innerHTMLStyle)
//sheet.innerHTML = innerHTMLStyle
//document.head.appendChild(sheet);
}
function invertColor(hex) {
if (hex.indexOf('#') === 0) {
hex = hex.slice(1);
}
// convert 3-digit hex to 6-digits.
if (hex.length === 3) {
hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
}
if (hex.length !== 6) {
throw new Error('Invalid HEX color.');
}
// invert color components
var r = (255 - parseInt(hex.slice(0, 2), 16)).toString(16),
g = (255 - parseInt(hex.slice(2, 4), 16)).toString(16),
b = (255 - parseInt(hex.slice(4, 6), 16)).toString(16);
// pad each with zeros and return
return '#' + padZero(r) + padZero(g) + padZero(b);
}
function padZero(str, len) {
len = len || 2;
var zeros = new Array(len).join('0');
return (zeros + str).slice(-len);
}
//rgb to hex
function componentToHex(c) {
var hex = c.toString(16);
return hex.length == 1 ? "0" + hex : hex;
}
function rgbToHex(color) {
//color = string like rgb(a,b,c)
//remove string parts
color = color.substring(4, color.length-1);
//turn into arr
color = color.split(',');
return "#" + componentToHex(parseInt(color[0])) + componentToHex(parseInt(color[1])) + componentToHex(parseInt(color[2]));
}
//setup image modal popup
imageModalSetup()
async function imageModalSetup(){
// Get the modal
var modal = document.getElementById("imageModal");
// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.getElementById("colorImageDisplay");
//make image visible
img.style.display = "block";
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function(){
modal.style.display = "block";
modalImg.src = this.src;
//captionText.innerHTML = this.alt;
}
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
$('#imageModal').fadeOut(500);
}
}
$(document).ready(function () {
//refresh button
const refreshButton = document.getElementById('refreshButton');
const refreshPage = () => {
location.reload();
}
refreshButton.addEventListener('click', refreshPage)
//if clicking outside modal, close modal
$(document).click(function (e) {
console.log('close modal')
if ($(e.target).is('#imageModal')) {
$('#imageModal').fadeOut(500);
}
});
//on escape key click, close modal
$(document).keydown(function(event) {
if (event.keyCode == 27) {
$('#imageModal').fadeOut(500);
}
});
//side bar collapse event
$('#sidebarCollapse').on('click', function () {
$('#sidebar').toggleClass('active');
});
});
//make request to colors backend
function getColors(){
return new Promise(async function (resolve, reject) {
$.ajax({
type: 'POST',
url: '/getColors',
data: {
type: "varValue",
},
}).then((data) => {
resolve(data)
}).catch((err) => {
reject(err)
});
})
}
</script>
</html>
推荐阅读
- python - 如何仅提取多行字符串的第一行
- python - Using def for matplotlib.pyplot - all data plotted, not what is passed to def
- python - how to select python tkinter columns with defaultdict?
- java - 在蓝/绿部署期间等待 Hazelcast 缓存完成重新平衡
- treeview - Google OrgChart 行问题
- android - Cordova Android 错误:app:transformClassesWithDesugarForDebug 添加插件时
- c# - 对 DataGridCell 应用填充后,DataGridCell 在 WPF 的顶部和底部显示空格
- excel - 创建Excel函数以获取雅虎财经股票报价
- javascript - Need help to induction curl Post in code JS / Node.js
- ldap - LDAP - Difference between apt-get and build from sources installation