diff --git a/lostplaces/lostplaces_app/forms.py b/lostplaces/lostplaces_app/forms.py index f08e771..6ac307a 100644 --- a/lostplaces/lostplaces_app/forms.py +++ b/lostplaces/lostplaces_app/forms.py @@ -51,4 +51,4 @@ class PlaceImageCreateForm(forms.ModelForm): class TagSubmitForm(forms.Form): - tag_list = forms.CharField(max_length=500) \ No newline at end of file + tag_list = forms.CharField(max_length=500, required=False) \ No newline at end of file diff --git a/lostplaces/lostplaces_app/static/main.css b/lostplaces/lostplaces_app/static/main.css index de9b1c1..5d6f195 100644 --- a/lostplaces/lostplaces_app/static/main.css +++ b/lostplaces/lostplaces_app/static/main.css @@ -574,7 +574,8 @@ body { padding: 8px 14px; border-radius: 2px; font-weight: bold; - cursor: pointer; } + cursor: pointer; + white-space: nowrap; } .LP-Button:active { background-color: #76323F; color: #f9f9f9; } @@ -600,19 +601,28 @@ body { flex-direction: column; margin-bottom: -30px; padding: 10px 0; } - .LP-Input .LP-Input__Field { + .LP-Input--tagging .LP-Button { + height: 53px; } + .LP-Input--tagging .LP-Input__Field, .LP-Input--tagging .tagify { + min-height: 35px; + height: max-content; + font-family: Montserrat, Helvetica, sans-serif; + font-size: 1em; + padding: 0; + padding-left: 8px; } + .LP-Input .LP-Input__Field, .LP-Input .tagify { border: none; border-bottom: 1px solid #565656; padding: 8px 0; margin-bottom: 30px; width: 100%; } - .LP-Input .LP-Input__Field:focus, .LP-Input .LP-Input__Field:active, .LP-Input .LP-Input__Field:invalid { + .LP-Input .LP-Input__Field:focus, .LP-Input .tagify:focus, .LP-Input .LP-Input__Field:active, .LP-Input .tagify:active, .LP-Input .LP-Input__Field:invalid, .LP-Input .tagify:invalid, .LP-Input .LP-Input__Field--active, .LP-Input .tagify--focus { margin-bottom: 29px; border-bottom: 2px solid #76323F; background-color: #f9f9f9; border-radius: 3px 3px 0 0; box-shadow: none; } - .LP-Input .LP-Input__Field[type=submit] { + .LP-Input .LP-Input__Field[type=submit], .LP-Input .tagify[type=submit] { background-color: #C09F80; color: #565656; border: none; @@ -620,7 +630,7 @@ body { border-radius: 2px; font-weight: bold; cursor: pointer; } - .LP-Input .LP-Input__Field[type=submit]:active { + .LP-Input .LP-Input__Field[type=submit]:active, .LP-Input .tagify[type=submit]:active { background-color: #76323F; color: #f9f9f9; } .LP-Input .LP-Input__Label { @@ -636,22 +646,30 @@ body { position: relative; top: -30px; overflow: hidden; } - .LP-Input--error .LP-Input__Field { + .LP-Input--error .LP-Input__Field, .LP-Input--error .tagify { margin-bottom: 25px; border-bottom: 2px solid #76323F; margin-bottom: 29px; } .LP-Input--error .LP-Input__Message { color: #76323F; } - .LP-Input--disabled .LP-Input__Field, .LP-Input--disabled .LP-Input__Field:disabled { + .LP-Input--disabled .LP-Input__Field, .LP-Input--disabled .tagify, + .LP-Input--disabled .LP-Input__Field:disabled, + .LP-Input--disabled .tagify:disabled { background-color: transparent; border-bottom: 1px dashed #565656; cursor: not-allowed; } - label + .LP-Input--disabled .LP-Input__Field, label + .LP-Input--disabled .LP-Input__Field:disabled { + label + .LP-Input--disabled .LP-Input__Field, label + .LP-Input--disabled .tagify, label + .LP-Input--disabled .LP-Input__Field:disabled, label + .LP-Input--disabled .tagify:disabled { color: red; } - .LP-Input--disabled .LP-Input__Field:focus, .LP-Input--disabled .LP-Input__Field:active, .LP-Input--disabled .LP-Input__Field:disabled:focus, .LP-Input--disabled .LP-Input__Field:disabled:active { + .LP-Input--disabled .LP-Input__Field:focus, .LP-Input--disabled .tagify:focus, .LP-Input--disabled .LP-Input__Field:active, .LP-Input--disabled .tagify:active, + .LP-Input--disabled .LP-Input__Field:disabled:focus, + .LP-Input--disabled .tagify:disabled:focus, + .LP-Input--disabled .LP-Input__Field:disabled:active, + .LP-Input--disabled .tagify:disabled:active { margin-bottom: 30px; border-radius: 0; } - .LP-Input--disabled .LP-Input__Field ~ .LP-Input__Message, .LP-Input--disabled .LP-Input__Field:disabled ~ .LP-Input__Message { + .LP-Input--disabled .LP-Input__Field ~ .LP-Input__Message, .LP-Input--disabled .tagify ~ .LP-Input__Message, + .LP-Input--disabled .LP-Input__Field:disabled ~ .LP-Input__Message, + .LP-Input--disabled .tagify:disabled ~ .LP-Input__Message { visibility: hidden; } .LP-Input--disabled .LP-Input__Label { color: #565656; } @@ -670,12 +688,14 @@ body { width: auto; object-fit: contain; } -.LP-Tag { +.LP-Tag, .tagify__tag { padding: 8px 14px; background-color: #D7CEC7; border-radius: 2px; width: max-content; } - .LP-Tag .LP-Paragraph { + .LP-Tag:hover, .tagify__tag:hover { + background-color: #bdbdbd; } + .LP-Tag .LP-Paragraph, .tagify__tag .LP-Paragraph { padding: 0; margin: 0; font-family: Montserrat, Helvetica, sans-serif; @@ -861,8 +881,8 @@ body { flex-wrap: wrap; padding: 0; margin: 0; } - .LP-TagList .LP-TagList__List .LP-TagList__Item { - margin: 6px; } + .LP-TagList .LP-TagList__List .LP-TagList__Item, .LP-TagList .LP-TagList__List .tagify__tag { + margin: 3px; } .LP-Menu { border-left: 1px solid #C09F80; } @@ -1189,7 +1209,13 @@ body { .LP-Footer .LP-LinkList__List .LP-LinkList__Item .LP-Link:hover { background-color: inherit; } -.LP-Form--inline .LP-Form__Legend, .LP-Form--inline .LP-Input__Label { +.LP-Form--tagging { + margin-top: 25px; } + .LP-Form--tagging div.LP-Form__Composition { + gap: 25px; } + +.LP-Form--inline .LP-Form__Legend, +.LP-Form--inline .LP-Input__Label { display: none; } .LP-Form--inline .LP-Form__Button { @@ -1198,6 +1224,12 @@ body { width: min-content; flex-basis: max-content; } +.LP-Form--inline fieldset.LP-Form__Fieldset { + max-width: unset; } + +.LP-Form--inline div.LP-Form__Composition { + padding: 0; } + @media (max-width: 450px) { .LP-Form:not(.LP-Form--inline) .LP-Form__Composition { flex-wrap: wrap; } } @@ -1359,25 +1391,23 @@ body { border: none; } .LP-ImageGrid__Container { gap: 10px; } - .LP-ImageGrid .LP-ImageGrid__Item { - box-shadow: 0 0 10px #565656; } - .LP-ImageGrid .LP-ImageGrid__Item, .LP-ImageGrid .LP-ImageGrid__Item * { - overflow: hidden; - word-break: break-all; } - .LP-ImageGrid .LP-ImageGrid__Item img { - width: 100%; - height: 100%; - object-fit: cover; } - .LP-ImageGrid .LP-ImageGrid__Item--left img { - object-position: left; } - .LP-ImageGrid .LP-ImageGrid__Item--center img { - object-position: center; } - .LP-ImageGrid .LP-ImageGrid__Item--top img { - object-position: top; } - .LP-ImageGrid .LP-ImageGrid__Item--bottom img { - object-position: botom; } - .LP-ImageGrid .LP-ImageGrid__Item--center img { - object-position: center; } + .LP-ImageGrid .LP-ImageGrid__Item, .LP-ImageGrid .LP-ImageGrid__Item * { + overflow: hidden; + word-break: break-all; } + .LP-ImageGrid .LP-ImageGrid__Item img { + width: 100%; + height: 100%; + object-fit: cover; } + .LP-ImageGrid .LP-ImageGrid__Item--left img { + object-position: left; } + .LP-ImageGrid .LP-ImageGrid__Item--center img { + object-position: center; } + .LP-ImageGrid .LP-ImageGrid__Item--top img { + object-position: top; } + .LP-ImageGrid .LP-ImageGrid__Item--bottom img { + object-position: botom; } + .LP-ImageGrid .LP-ImageGrid__Item--center img { + object-position: center; } .LP-MainContainer { margin: 0 auto; @@ -1413,3 +1443,60 @@ body { margin: 0; padding: 0; margin-bottom: 25px; } } + +.tagify { + display: flex; + align-items: center; + gap: 6px; + flex-wrap: wrap; } + .tagify + input, + .tagify + textarea { + display: none; } + +.tagify__tag { + background-color: #bdbdbd; + display: inline-flex; + cursor: default; + transition: .13s ease-out; + height: max-content; + align-items: center; + gap: 3px; } + .tagify__tag:hover { + background-color: #e9e9e9; } + +.tagify__input { + flex-grow: 1; + display: inline-block; + min-width: 110px; + margin: 5px; + line-height: inherit; + position: relative; + white-space: pre-wrap; + margin-left: 15px; } + +.tagify__tag__removeBtn { + order: 5; + cursor: pointer; + font: 1em/1 Arial; + transition: .2s ease-out; + color: #76323F; } + +.tagify__tag__removeBtn::after { + content: "\00D7"; } + +.tagify__tag__removeBtn:hover { + color: #565656; } + +.tagify__tag__removeBtn:hover + div > span { + opacity: .5; } + +.tagify__tag__removeBtn:hover + div::before { + box-shadow: 0 0 0 1.1em rgba(211, 148, 148, 0.3) inset !important; + box-shadow: 0 0 0 var(--tag-inset-shadow-size) var(--tag-remove-bg) inset !important; + transition: .2s; } + +.tagify__tag--loading .tagify__tag__removeBtn { + display: none; } + +.tagify[readonly]:not(.tagify--mix) .tagify__tag__removeBtn { + display: none; } diff --git a/lostplaces/lostplaces_app/templates/global.html b/lostplaces/lostplaces_app/templates/global.html index fa23d10..e657bf5 100644 --- a/lostplaces/lostplaces_app/templates/global.html +++ b/lostplaces/lostplaces_app/templates/global.html @@ -4,6 +4,9 @@
+ {% block additional_head %} + {% endblock additional_head %} + @@ -12,9 +15,6 @@ {% block title %}Urban Exploration{% endblock %} - {% block additional_head %} - {% endblock additional_head %} - diff --git a/lostplaces/lostplaces_app/templates/partials/form/inputField.html b/lostplaces/lostplaces_app/templates/partials/form/inputField.html index 1d141c2..8447c67 100644 --- a/lostplaces/lostplaces_app/templates/partials/form/inputField.html +++ b/lostplaces/lostplaces_app/templates/partials/form/inputField.html @@ -1,16 +1,18 @@ {% load widget_tweaks %} -