applications: add background gear image to editable apps (#70989)

This commit is contained in:
Frédéric Péters 2022-11-25 16:08:37 +01:00
parent cd074bf66f
commit 244d0dc1bf
3 changed files with 46 additions and 1 deletions

View File

@ -19,7 +19,7 @@
{% if object_list %}
<div id="applications">
{% for application in object_list %}
<div class="application application--{{ application.slug }}">
<div class="application application--{{ application.slug }} {% if application.editable %}application--editable{% endif %}">
<h3>
{% if application.icon %}
{% thumbnail application.icon '64x64' crop='center' format='PNG' as im %}

View File

@ -318,6 +318,8 @@ a.button.button-paragraph:hover p {
.application {
background: white;
flex: 1;
display: flex;
flex-direction: column;
min-width: calc(50% - 0.5em);
max-width: calc(50% - 0.5em);
color: #3c3c33;
@ -331,9 +333,18 @@ a.button.button-paragraph:hover p {
vertical-align: middle;
}
}
p {
flex: 1;
}
.buttons {
justify-content: flex-end;
}
&--editable {
background-position: right -100px bottom -100px;
background-repeat: no-repeat;
background-size: 200px;
background-image: url(../img/app-gear.svg);
}
}
}

View File

@ -0,0 +1,34 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="4.2333331mm"
height="4.2333331mm"
viewBox="0 0 4.2333331 4.2333331"
version="1.1"
id="svg2602"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<defs
id="defs2599" />
<g
id="layer1"
transform="translate(-138.83249,-161.48503)">
<g
id="g4757"
transform="matrix(0.26458333,0,0,0.26458333,21.886654,55.122538)"
style="display:inline">
<rect
style="color:#eef2f4;display:inline;overflow:visible;visibility:visible;fill:none;stroke:none;stroke-width:2;marker:none;enable-background:accumulate"
id="rect35549-4"
width="16"
height="16"
x="442"
y="401.99997" />
<path
style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#eef2f4;fill-opacity:1;fill-rule:nonzero;stroke:none;marker:none;enable-background:accumulate"
d="m 450.0002,403 c -0.22065,0 -0.44081,0.0113 -0.65625,0.0312 l -0.40625,2.09375 c -0.33446,0.0733 -0.66305,0.17589 -0.96875,0.3125 l -1.53125,-1.46875 c -0.38863,0.23011 -0.72695,0.51408 -1.0625,0.8125 l 0.90625,1.90625 c -0.22242,0.24899 -0.42425,0.5225 -0.59375,0.8125 l -2.09375,-0.28125 c -0.17772,0.40877 -0.30872,0.83637 -0.40625,1.28125 l 1.84375,1 c -0.0171,0.16809 -0.0312,0.3274 -0.0312,0.5 0,0.1726 0.0142,0.33191 0.0312,0.5 l -1.84375,1 c 0.0975,0.44488 0.22853,0.87248 0.40625,1.28125 l 2.09375,-0.28125 c 0.1695,0.29 0.37133,0.56351 0.59375,0.8125 l -0.90625,1.90625 c 0.33555,0.29842 0.67387,0.58239 1.0625,0.8125 l 1.53125,-1.46875 c 0.3057,0.13661 0.63429,0.23916 0.96875,0.3125 l 0.40625,2.09375 c 0.21544,0.02 0.4356,0.0312 0.65625,0.0312 0.22065,0 0.44081,-0.0113 0.65625,-0.0312 l 0.40625,-2.09375 c 0.33446,-0.0733 0.66305,-0.17589 0.96875,-0.3125 l 1.53125,1.46875 c 0.38863,-0.23011 0.72695,-0.51408 1.0625,-0.8125 l -0.90625,-1.90625 c 0.22242,-0.24899 0.42425,-0.5225 0.59375,-0.8125 l 2.09375,0.28125 c 0.17772,-0.40877 0.30872,-0.83637 0.40625,-1.28125 l -1.84375,-1 c 0.0171,-0.16809 0.0312,-0.3274 0.0312,-0.5 0,-0.1726 -0.0142,-0.33191 -0.0312,-0.5 l 1.84375,-1 c -0.0975,-0.44488 -0.22853,-0.87248 -0.40625,-1.28125 l -2.09375,0.28125 c -0.1695,-0.29 -0.37133,-0.56351 -0.59375,-0.8125 l 0.90625,-1.90625 c -0.33555,-0.29842 -0.67387,-0.58239 -1.0625,-0.8125 l -1.53125,1.46875 c -0.3057,-0.13661 -0.63429,-0.23916 -0.96875,-0.3125 l -0.40625,-2.09375 C 450.44101,403.0112 450.22085,403 450.0002,403 Z m 0,4 c 1.65685,0 3,1.34315 3,3 0,1.65685 -1.34315,3 -3,3 -1.65685,0 -3,-1.34315 -3,-3 0,-1.65685 1.34315,-3 3,-3 z"
id="path35543-6-4" />
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 2.7 KiB