Formular:Artist: Unterschied zwischen den Versionen

Zur Navigation springen Zur Suche springen
Zeile 37: Zeile 37:
 
--><div class= formOptionsBody>{{{field|artist_m|input type= checkboxes| values={{#var:Moderne}} |hide select all}}}</div></div>
 
--><div class= formOptionsBody>{{{field|artist_m|input type= checkboxes| values={{#var:Moderne}} |hide select all}}}</div></div>
 
<div class=q_button>{{{standard input|run query|label=Resultate anzeigen}}}</div>
 
<div class=q_button>{{{standard input|run query|label=Resultate anzeigen}}}</div>
</div>{{#css:
+
</div>{{#css:   
#q_wrapper,
 
#infoText {
 
    width: auto;
 
    max-width: 70rem;
 
    padding: 2em;
 
    margin-bottom: 1em;
 
    border-radius: 0.5em;
 
    background: #dbf0ff;
 
}
 
#q_wrapper {
 
    display: flex;
 
    flex-wrap: wrap;
 
    justify-content: space-between;
 
    display: block;
 
    background: #eee;
 
}
 
.infoTextBody {  
 
    width: max(60%,18rem);
 
    margin: auto;
 
}
 
.formOptions {
 
    width: max(15em,30%);
 
    width: auto;
 
}
 
 
.formOptions[id^=artist] {
 
.formOptions[id^=artist] {
 
display: none;  
 
display: none;  
 
}
 
}
 
.formOptionsBody  {
 
.formOptionsBody  {
padding: 1em;
+
     max-height:15em;
margin: .5em 0;
 
    display: block;
 
     max-height:15em;  
 
    overflow: auto;
 
    background: #fff;
 
    border: 1px solid #ddd;
 
 
}  
 
}  
 
.radioButtonItem:first-child {
 
.radioButtonItem:first-child {
Zeile 83: Zeile 53:
 
}
 
}
 
#pfForm label.checkboxLabel,
 
#pfForm label.checkboxLabel,
.formOptions label {
+
.formOptions label {  
    display: block;
 
 
     width: 13.5em;   
 
     width: 13.5em;   
    padding-left:1.5em;
+
}    
    position: relative;
 
    cursor: pointer;
 
}
 
#pfForm input[type="checkbox"],
 
#pfForm input[type="radio"] {     
 
    -webkit-appearance: none;
 
    appearance: none;
 
    position: absolute;
 
    left: 0;
 
    top: 0.2em;
 
    margin: 0;
 
    display: inline-block;
 
    width: 1.1rem;
 
    height: 1.1rem;
 
}
 
#pfForm input[type="radio"] { 
 
    border-radius: 50%;
 
    background-color: #fff;
 
    border: .15em solid #aaa;
 
    box-shadow: inset 0 0 0 0.2em #fff;
 
}
 
#pfForm input[type="radio"]:hover { 
 
    background-color: #ccc;
 
}
 
#pfForm input[type="radio"]:checked {   
 
    background-color: #155bdb;
 
    border-color: #72a4ff;
 
}
 
#pfForm input[type="checkbox"] {
 
    font-family: 'Font Awesome 5 Free';
 
    font-weight: 400;
 
    font-size: 1rem;
 
    line-height: 1rem;
 
    border-radius: 0.2em;
 
    box-shadow: 1px 1px 2px 0px #aaa;
 
    background: #eee;
 
}
 
#pfForm input[type="checkbox"]:checked {
 
    background-color: #cfdcff;
 
}
 
#pfForm input[type="checkbox"]::before {
 
    content: '\f00c';
 
    color: #003dad;
 
    position: absolute;
 
    left: 0;
 
    top: 0;
 
    font-size: 1.3em;
 
    opacity:0;
 
    }
 
#pfForm input[type="checkbox"]:hover::before {
 
    opacity:.2;
 
    }
 
#pfForm input[type="checkbox"]:checked::before {
 
    opacity:1;
 
    }
 
.q_button {
 
    width: 100%;
 
    text-align: center;
 
    padding-top: 1em;
 
}
 
#infoButton {
 
    position: relative;
 
    display: block;
 
    cursor: pointer;
 
    width: auto;
 
    z-index:1;
 
}
 
#infoButton i {
 
    position: absolute;
 
    display: block;
 
    right: -2.2em;
 
    top: 1em;
 
    background: #0c67d3;
 
    color: #fff;
 
    width: 2em;
 
    text-align: center;
 
    line-height: 2em;
 
    border-radius: 50%;
 
opacity: .6;
 
}
 
#infoButton i:hover {
 
opacity: 1;
 
}
 
#wpRunQuery {
 
    display: inline-block;
 
    font-size: 1.2em;
 
    border: 0;
 
    padding: 0.3em 0.5em;
 
    background: #ddd;
 
    border-radius: 0.2em;
 
    background: #003ca9;
 
    color: #eee;
 
    opacity: .8;
 
    margin: 0.2em;
 
    cursor: pointer;
 
}
 
#wpRunQuery:hover {
 
    opacity: 1;
 
    }
 
.pf-runquery-formcontent hr {
 
    display: none;
 
    opacity: 0;
 
}
 
 
}}{{{end template}}}</includeonly>
 
}}{{{end template}}}</includeonly>

Version vom 21. Juli 2022, 14:27 Uhr

Dies ist das Formular „Artist“. Es definiert eine Abfrage nach Werken von Künstlern. S.a. Vorlage:Artist