framework to switch between grid and list view
This commit is contained in:
parent
21ad1fd832
commit
7c34ceb9f8
|
|
@ -6,6 +6,11 @@
|
|||
"show_subed_only": false,
|
||||
"page_size": 12
|
||||
},
|
||||
"default_view": {
|
||||
"home": "grid",
|
||||
"channel": "grid",
|
||||
"downloads": "list"
|
||||
},
|
||||
"subscriptions": {
|
||||
"auto_search": false,
|
||||
"auto_download": false,
|
||||
|
|
|
|||
|
|
@ -31,6 +31,10 @@
|
|||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="view-icons">
|
||||
<img src="{% static 'img/icon-gridview.svg' %}" onclick="changeView(this)" data-origin="home" data-value="grid" alt="grid view">
|
||||
<img src="{% static 'img/icon-listview.svg' %}" onclick="changeView(this)" data-origin="home" data-value="list" alt="list view">
|
||||
</div>
|
||||
<div id="player" class="video-player"></div>
|
||||
<div class="video-list">
|
||||
{% if videos %}
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@ class HomeView(View):
|
|||
|
||||
def get(self, request):
|
||||
"""return home search results"""
|
||||
colors, sort_order, hide_watched = self.read_config()
|
||||
colors, view_style, sort_order, hide_watched = self.read_config()
|
||||
# handle search
|
||||
search_get = request.GET.get("search", False)
|
||||
if search_get:
|
||||
|
|
@ -66,6 +66,7 @@ class HomeView(View):
|
|||
"sortorder": sort_order,
|
||||
"hide_watched": hide_watched,
|
||||
"colors": colors,
|
||||
"view_style": view_style,
|
||||
}
|
||||
return render(request, "home/home.html", context)
|
||||
|
||||
|
|
@ -108,9 +109,10 @@ class HomeView(View):
|
|||
"""read needed values from redis"""
|
||||
config_handler = AppConfig().config
|
||||
colors = config_handler["application"]["colors"]
|
||||
view_style = config_handler["default_view"]["home"]
|
||||
sort_order = RedisArchivist().get_message("sort_order")
|
||||
hide_watched = RedisArchivist().get_message("hide_watched")
|
||||
return colors, sort_order, hide_watched
|
||||
return colors, view_style, sort_order, hide_watched
|
||||
|
||||
@staticmethod
|
||||
def post(request):
|
||||
|
|
@ -474,6 +476,7 @@ class PostData:
|
|||
"""map dict key and return function to execute"""
|
||||
exec_map = {
|
||||
"watched": self.watched,
|
||||
"change_view": self.change_view,
|
||||
"rescan_pending": self.rescan_pending,
|
||||
"ignore": self.ignore,
|
||||
"dl_pending": self.dl_pending,
|
||||
|
|
@ -499,6 +502,14 @@ class PostData:
|
|||
WatchState(self.exec_val).mark_as_watched()
|
||||
return {"success": True}
|
||||
|
||||
def change_view(self):
|
||||
"""process view changes in home, channel, and downloads"""
|
||||
origin, new_view = self.exec_val.split(":")
|
||||
print(f"change view on page {origin} to {new_view}")
|
||||
update_dict = {f"default_view.{origin}": [new_view]}
|
||||
AppConfig().update_config(update_dict)
|
||||
return {"success": True}
|
||||
|
||||
@staticmethod
|
||||
def rescan_pending():
|
||||
"""look for new items in subscribed channels"""
|
||||
|
|
|
|||
|
|
@ -211,6 +211,19 @@ button:hover {
|
|||
filter: var(--img-filter);
|
||||
}
|
||||
|
||||
.view-icons {
|
||||
display: flex;
|
||||
justify-content: end;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.view-icons img {
|
||||
width: 30px;
|
||||
margin: 5px 10px;
|
||||
cursor: pointer;
|
||||
filter: var(--img-filter);
|
||||
}
|
||||
|
||||
#search-box {
|
||||
display: none;
|
||||
flex: auto;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,122 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
width="2000"
|
||||
height="2000"
|
||||
viewBox="0 0 529.16666 529.16735"
|
||||
version="1.1"
|
||||
id="svg8"
|
||||
inkscape:version="0.92.4 (5da689c313, 2019-01-14)"
|
||||
sodipodi:docname="Gridview.svg">
|
||||
<defs
|
||||
id="defs2" />
|
||||
<sodipodi:namedview
|
||||
id="base"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1.0"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:zoom="0.35729063"
|
||||
inkscape:cx="901.7564"
|
||||
inkscape:cy="1021.9111"
|
||||
inkscape:document-units="mm"
|
||||
inkscape:current-layer="layer1"
|
||||
showgrid="false"
|
||||
units="px"
|
||||
showguides="true"
|
||||
inkscape:guide-bbox="true"
|
||||
inkscape:window-width="1920"
|
||||
inkscape:window-height="1017"
|
||||
inkscape:window-x="-8"
|
||||
inkscape:window-y="-8"
|
||||
inkscape:window-maximized="1">
|
||||
<sodipodi:guide
|
||||
position="247.25932,291.92959"
|
||||
orientation="1,0"
|
||||
id="guide853"
|
||||
inkscape:locked="false" />
|
||||
<sodipodi:guide
|
||||
position="337.22901,167.98535"
|
||||
orientation="0,1"
|
||||
id="guide855"
|
||||
inkscape:locked="false" />
|
||||
<sodipodi:guide
|
||||
position="266.76325,305.4565"
|
||||
orientation="0,1"
|
||||
id="guide857"
|
||||
inkscape:locked="false" />
|
||||
<sodipodi:guide
|
||||
position="257.79774,279.50371"
|
||||
orientation="0,1"
|
||||
id="guide861"
|
||||
inkscape:locked="false" />
|
||||
</sodipodi:namedview>
|
||||
<metadata
|
||||
id="metadata5">
|
||||
<rdf:RDF>
|
||||
<cc:Work
|
||||
rdf:about="">
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||
<dc:title></dc:title>
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<g
|
||||
inkscape:label="Ebene 1"
|
||||
inkscape:groupmode="layer"
|
||||
id="layer1"
|
||||
transform="translate(0,232.16736)">
|
||||
<g
|
||||
id="g873"
|
||||
transform="matrix(1.3431799,0,0,1.3431799,-84.854433,26.13855)"
|
||||
style="stroke:none">
|
||||
<rect
|
||||
ry="7.445024"
|
||||
rx="7.445024"
|
||||
y="-121.39048"
|
||||
x="79.903137"
|
||||
height="113.24854"
|
||||
width="167.35619"
|
||||
id="rect815"
|
||||
style="opacity:1;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.56300002;stroke-linecap:round;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:1.12600005, 0.56300002999999998;stroke-dashoffset:0;stroke-opacity:0.22508042;paint-order:markers fill stroke" />
|
||||
<rect
|
||||
ry="7.445024"
|
||||
rx="7.445024"
|
||||
y="-121.7837"
|
||||
x="273.05484"
|
||||
height="113.24854"
|
||||
width="167.35619"
|
||||
id="rect815-4"
|
||||
style="opacity:1;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.56300002;stroke-linecap:round;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:1.12600006, 0.56300004000000003;stroke-dashoffset:0;stroke-opacity:0.22508042;paint-order:markers fill stroke" />
|
||||
<rect
|
||||
ry="7.445024"
|
||||
rx="7.445024"
|
||||
y="17.882772"
|
||||
x="79.903137"
|
||||
height="113.24854"
|
||||
width="167.35619"
|
||||
id="rect815-2"
|
||||
style="opacity:1;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.56300002;stroke-linecap:round;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:1.12600006, 0.56300004000000003;stroke-dashoffset:0;stroke-opacity:0.22508042;paint-order:markers fill stroke" />
|
||||
<rect
|
||||
ry="7.445024"
|
||||
rx="7.445024"
|
||||
y="17.453594"
|
||||
x="273.05484"
|
||||
height="113.24854"
|
||||
width="167.35619"
|
||||
id="rect815-7"
|
||||
style="opacity:1;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.56300002;stroke-linecap:round;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:1.12600006, 0.56300004000000003;stroke-dashoffset:0;stroke-opacity:0.22508042;paint-order:markers fill stroke" />
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.2 KiB |
|
|
@ -0,0 +1,122 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
width="2000"
|
||||
height="2000"
|
||||
viewBox="0 0 529.16666 529.16735"
|
||||
version="1.1"
|
||||
id="svg8"
|
||||
inkscape:version="0.92.4 (5da689c313, 2019-01-14)"
|
||||
sodipodi:docname="Listview.svg">
|
||||
<defs
|
||||
id="defs2" />
|
||||
<sodipodi:namedview
|
||||
id="base"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1.0"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:zoom="0.42053519"
|
||||
inkscape:cx="851.82064"
|
||||
inkscape:cy="1105.7974"
|
||||
inkscape:document-units="mm"
|
||||
inkscape:current-layer="g873"
|
||||
showgrid="false"
|
||||
units="px"
|
||||
showguides="true"
|
||||
inkscape:guide-bbox="true"
|
||||
inkscape:window-width="1920"
|
||||
inkscape:window-height="1017"
|
||||
inkscape:window-x="-8"
|
||||
inkscape:window-y="-8"
|
||||
inkscape:window-maximized="1">
|
||||
<sodipodi:guide
|
||||
position="247.25932,291.92959"
|
||||
orientation="1,0"
|
||||
id="guide853"
|
||||
inkscape:locked="false" />
|
||||
<sodipodi:guide
|
||||
position="337.22901,167.98535"
|
||||
orientation="0,1"
|
||||
id="guide855"
|
||||
inkscape:locked="false" />
|
||||
<sodipodi:guide
|
||||
position="266.76325,305.4565"
|
||||
orientation="0,1"
|
||||
id="guide857"
|
||||
inkscape:locked="false" />
|
||||
<sodipodi:guide
|
||||
position="257.79774,279.50371"
|
||||
orientation="0,1"
|
||||
id="guide861"
|
||||
inkscape:locked="false" />
|
||||
<sodipodi:guide
|
||||
position="22.413775,336.67894"
|
||||
orientation="1,0"
|
||||
id="guide926"
|
||||
inkscape:locked="false" />
|
||||
<sodipodi:guide
|
||||
position="503.71355,217.50031"
|
||||
orientation="1,0"
|
||||
id="guide928"
|
||||
inkscape:locked="false" />
|
||||
</sodipodi:namedview>
|
||||
<metadata
|
||||
id="metadata5">
|
||||
<rdf:RDF>
|
||||
<cc:Work
|
||||
rdf:about="">
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||
<dc:title></dc:title>
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<g
|
||||
inkscape:label="Ebene 1"
|
||||
inkscape:groupmode="layer"
|
||||
id="layer1"
|
||||
transform="translate(0,232.16736)">
|
||||
<g
|
||||
id="g873"
|
||||
transform="matrix(1.3431799,0,0,1.3431799,-84.854433,26.13855)">
|
||||
<rect
|
||||
ry="7.445024"
|
||||
rx="7.445024"
|
||||
y="-121.34892"
|
||||
x="79.944702"
|
||||
height="70.107315"
|
||||
width="358.24551"
|
||||
id="rect815"
|
||||
style="opacity:1;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.64810181;stroke-linecap:round;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:1.29620369, 0.64810185;stroke-dashoffset:0;stroke-opacity:0.22508042;paint-order:markers fill stroke" />
|
||||
<rect
|
||||
ry="7.4450235"
|
||||
rx="7.4450235"
|
||||
y="-31.167784"
|
||||
x="79.861153"
|
||||
height="70.107315"
|
||||
width="358.32907"
|
||||
id="rect815-20"
|
||||
style="opacity:1;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.64817739;stroke-linecap:round;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:1.29635485, 0.64817743;stroke-dashoffset:0;stroke-opacity:0.22508042;paint-order:markers fill stroke" />
|
||||
<rect
|
||||
ry="7.4450235"
|
||||
rx="7.4450231"
|
||||
y="60.024326"
|
||||
x="79.908524"
|
||||
height="70.106117"
|
||||
width="358.28171"
|
||||
id="rect815-8"
|
||||
style="opacity:1;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.64812905;stroke-linecap:round;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:1.29625813, 0.64812907;stroke-dashoffset:0;stroke-opacity:0.22508042;paint-order:markers fill stroke" />
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.0 KiB |
|
|
@ -43,6 +43,18 @@ function unsubscribe(channel_id) {
|
|||
document.getElementById(channel_id).remove();
|
||||
}
|
||||
|
||||
function changeView(image) {
|
||||
var sourcePage = image.getAttribute("data-origin");
|
||||
var newView = image.getAttribute("data-value");
|
||||
var payload = JSON.stringify({'change_view': sourcePage + ":" + newView});
|
||||
console.log(payload);
|
||||
sendPost(payload);
|
||||
setTimeout(function(){
|
||||
location.reload();
|
||||
return false;
|
||||
}, 500);
|
||||
}
|
||||
|
||||
// download page buttons
|
||||
function rescanPending() {
|
||||
var payload = JSON.stringify({'rescan_pending': true});
|
||||
|
|
|
|||
Loading…
Reference in New Issue