Configurable column count

This commit is contained in:
simon987 2020-07-26 11:50:21 -04:00
parent 61de9e9f14
commit db2285973f
7 changed files with 81 additions and 26 deletions

View File

@ -121,7 +121,7 @@ body {
background: #546b7a; background: #546b7a;
} }
a:hover,.btn:hover { a:hover, .btn:hover {
color: #fff; color: #fff;
} }
@ -130,7 +130,11 @@ a:hover,.btn:hover {
} }
.document { .document {
padding: 0.5rem; padding: 0.3rem;
}
.card-text:last-child {
margin-top: -1px;
} }
.document p { .document p {
@ -203,7 +207,7 @@ a:hover,.btn:hover {
margin-top: -1px; margin-top: -1px;
font-family: monospace; font-family: monospace;
font-size: 90%; font-size: 90%;
background: rgba(0,0,0,0.2); background: rgba(0, 0, 0, 0.2);
padding: 0.1em 0.4em; padding: 0.1em 0.4em;
color: white; color: white;
cursor: pointer; cursor: pointer;
@ -241,20 +245,6 @@ a:hover,.btn:hover {
width: 100%; width: 100%;
} }
@media screen and (min-width: 1500px) {
.container {
max-width: 1440px;
}
.bricklayer-column-sizer {
width: 20% !important;
}
.bricklayer-column {
max-width: 20%;
}
}
@media screen and (min-width: 1800px) { @media screen and (min-width: 1800px) {
.container { .container {
max-width: 1550px; max-width: 1550px;
@ -451,6 +441,7 @@ option {
.small-btn { .small-btn {
display: none; display: none;
} }
.large-btn { .large-btn {
display: inherit; display: inherit;
} }
@ -460,6 +451,7 @@ option {
.small-btn { .small-btn {
display: inherit; display: inherit;
} }
.large-btn { .large-btn {
display: none; display: none;
} }

View File

@ -70,7 +70,11 @@ body {
} }
.document { .document {
padding: 0.5rem; padding: 0.3rem;
}
.card-text:last-child {
margin-top: -1px;
} }
.document p { .document p {
@ -181,6 +185,10 @@ body {
width: 100%; width: 100%;
} }
.bricklayer {
/*max-width: 100%;*/
}
@media screen and (max-width: 1200px) { @media screen and (max-width: 1200px) {
.bricklayer-column { .bricklayer-column {
max-width: 100%; max-width: 100%;

View File

@ -1,4 +1,4 @@
const SIZE = 40; const SIZE = 60;
let mimeMap = []; let mimeMap = [];
let tagMap = []; let tagMap = [];
let mimeTree; let mimeTree;

View File

@ -101,7 +101,8 @@ const _defaults = {
treemapColor: "PuBuGn", treemapColor: "PuBuGn",
treemapSize: "large", treemapSize: "large",
suggestPath: true, suggestPath: true,
fragmentSize: 100 fragmentSize: 100,
columns: 5
}; };
function loadSettings() { function loadSettings() {
@ -118,6 +119,7 @@ function loadSettings() {
$("#settingTreemapType").val(CONF.options.treemapType); $("#settingTreemapType").val(CONF.options.treemapType);
$("#settingSuggestPath").prop("checked", CONF.options.suggestPath); $("#settingSuggestPath").prop("checked", CONF.options.suggestPath);
$("#settingFragmentSize").val(CONF.options.fragmentSize); $("#settingFragmentSize").val(CONF.options.fragmentSize);
$("#settingColumns").val(CONF.options.columns);
} }
function Settings() { function Settings() {
@ -125,6 +127,7 @@ function Settings() {
this._onUpdate = function () { this._onUpdate = function () {
$("#fuzzyToggle").prop("checked", this.options.fuzzy); $("#fuzzyToggle").prop("checked", this.options.fuzzy);
updateColumnStyle();
}; };
this.load = function () { this.load = function () {
@ -161,6 +164,7 @@ function updateSettings() {
CONF.options.treemapType = $("#settingTreemapType").val(); CONF.options.treemapType = $("#settingTreemapType").val();
CONF.options.suggestPath = $("#settingSuggestPath").prop("checked"); CONF.options.suggestPath = $("#settingSuggestPath").prop("checked");
CONF.options.fragmentSize = $("#settingFragmentSize").val(); CONF.options.fragmentSize = $("#settingFragmentSize").val();
CONF.options.columns = $("#settingColumns").val();
CONF.save(); CONF.save();
if (typeof searchDebounced !== "undefined") { if (typeof searchDebounced !== "undefined") {
@ -203,3 +207,26 @@ function toggleTheme() {
} }
window.location.reload(); window.location.reload();
} }
function updateColumnStyle() {
const style = document.getElementById("style");
if (style) {
style.innerHTML =
`
@media screen and (min-width: 1500px) {
.container {
max-width: 1440px;
}
.bricklayer-column-sizer {
width: ${100 / CONF.options.columns}% !important;
}
.bricklayer-column {
max-width: ${100 / CONF.options.columns}%;
}
}
}
`
}
}

View File

@ -6,6 +6,7 @@
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no'/> <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no'/>
<link href="css" rel="stylesheet" type="text/css"> <link href="css" rel="stylesheet" type="text/css">
<style id="style"></style>
</head> </head>
<body> <body>
@ -216,6 +217,20 @@
<option value="list">List</option> <option value="list">List</option>
</select> </select>
<div class="form-group">
<label for="settingColumns">Maximum column count</label>
<select id="settingColumns" class="form-control form-control-sm">
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="13">13</option>
</select>
</div>
<hr/> <hr/>
<h4>Stats</h4> <h4>Stats</h4>

View File

@ -94,6 +94,19 @@
<option value="list">List</option> <option value="list">List</option>
</select> </select>
<div class="form-group">
<label for="settingColumns">Maximum column count</label>
<select id="settingColumns" class="form-control form-control-sm">
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
</div>
<hr/> <hr/>
<h4>Stats</h4> <h4>Stats</h4>

File diff suppressed because one or more lines are too long