From 591469799f1060a859894819b994dd0439e93261 Mon Sep 17 00:00:00 2001 From: reverend Date: Wed, 26 Aug 2020 21:36:10 +0200 Subject: [PATCH] Photoalbums can now be linked by users --- lostplaces/lostplaces_app/admin.py | 1 + lostplaces/lostplaces_app/models.py | 21 + lostplaces/lostplaces_app/static/main.css | 881 +++++++++++++++--- .../photo_album/photo_album_create.html | 41 + .../templates/place/place_detail.html | 121 ++- lostplaces/lostplaces_app/urls.py | 4 +- lostplaces/lostplaces_app/views.py | 41 +- 7 files changed, 945 insertions(+), 165 deletions(-) create mode 100644 lostplaces/lostplaces_app/templates/photo_album/photo_album_create.html diff --git a/lostplaces/lostplaces_app/admin.py b/lostplaces/lostplaces_app/admin.py index 4060f1a..11e082a 100644 --- a/lostplaces/lostplaces_app/admin.py +++ b/lostplaces/lostplaces_app/admin.py @@ -26,3 +26,4 @@ admin.site.register(Explorer, ExplorerAdmin) admin.site.register(Voucher, VoucherAdmin) admin.site.register(Place) admin.site.register(PlaceImage) +admin.site.register(PhotoAlbum) diff --git a/lostplaces/lostplaces_app/models.py b/lostplaces/lostplaces_app/models.py index bcb631a..a6d16fa 100644 --- a/lostplaces/lostplaces_app/models.py +++ b/lostplaces/lostplaces_app/models.py @@ -139,3 +139,24 @@ def auto_delete_file_on_change(sender, instance, **kwargs): if not old_file == new_file: if os.path.isfile(old_file.path): os.remove(old_file.path) + + +class ExternalLink(models.Model): + url = models.URLField(max_length=200) + label = models.CharField(max_length=100) + submitted_by = models.ForeignKey( + Explorer, + on_delete=models.SET_NULL, + null=True, + blank=True, + related_name='external_links' + ) + submitted_when = models.DateTimeField(auto_now_add=True, null=True) + +class PhotoAlbum(ExternalLink): + place = models.ForeignKey( + Place, + on_delete=models.CASCADE, + related_name='photo_albums', + null=True + ) \ No newline at end of file diff --git a/lostplaces/lostplaces_app/static/main.css b/lostplaces/lostplaces_app/static/main.css index 5af6813..31ae191 100644 --- a/lostplaces/lostplaces_app/static/main.css +++ b/lostplaces/lostplaces_app/static/main.css @@ -1,3 +1,424 @@ +.pink { + background-color: pink; } + +.RV-Alignment__Container { + display: grid; } + .RV-Alignment__Container--top { + display: grid; + align-content: start; } + .RV-Alignment__Container--bottom { + display: grid; + align-content: end; } + .RV-Alignment__Container--left { + display: grid; + justify-content: start; } + .RV-Alignment__Container--right { + display: grid; + justify-content: end; } + .RV-Alignment__Container--horizontalCenter { + display: grid; + justify-content: center; } + .RV-Alignment__Container--verticalCenter { + display: grid; + align-items: center; } + .RV-Alignment__Container--center { + display: grid; + justify-content: center; + display: grid; + align-items: center; } + +.RV-FlexRow__Container { + display: flex; + flex-direction: row; + height: 100%; } + .RV-FlexRow__Container--multiRow { + flex-wrap: wrap; } + .RV-FlexRow__Container--column { + display: flex; + flex-direction: column; } + +.RV-FlexRow__Item { + min-width: min-content; + width: 100%; } + .RV-FlexRow__Item__Container { + display: grid; } + .RV-FlexRow__Item__Container--top { + display: grid; + align-content: start; } + .RV-FlexRow__Item__Container--bottom { + display: grid; + align-content: end; } + .RV-FlexRow__Item__Container--left { + display: grid; + justify-content: start; } + .RV-FlexRow__Item__Container--right { + display: grid; + justify-content: end; } + .RV-FlexRow__Item__Container--horizontalCenter { + display: grid; + justify-content: center; } + .RV-FlexRow__Item__Container--verticalCenter { + display: grid; + align-items: center; } + .RV-FlexRow__Item__Container--center { + display: grid; + justify-content: center; + display: grid; + align-items: center; } + .RV-FlexRow__Item, .RV-FlexRow__Item--normal { + flex-grow: 3; + flex-shrink: 3; } + .RV-FlexRow__Item--narrower { + flex-grow: 1; + flex-shrink: 5; } + .RV-FlexRow__Item--narrow { + flex-grow: 2; + flex-shrink: 4; } + .RV-FlexRow__Item--wide { + flex-grow: 4; + flex-shrink: 2; } + .RV-FlexRow__Item--wider { + flex-grow: 5; + flex-shrink: 1; } + .RV-FlexRow__Item--fixedSize { + flex-grow: 0; + flex-shrink: 0; + width: min-content; + flex-basis: 100px; } + +.RV-FlexGrid__Container { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); + grid-template-rows: repeat(auto-fill, minmax(300px, 1fr)); + grid-auto-rows: minmax(300px, 1fr); } + +.RV-FlexGrid__Item__Container { + display: grid; } + .RV-FlexGrid__Item__Container--top { + display: grid; + align-content: start; } + .RV-FlexGrid__Item__Container--bottom { + display: grid; + align-content: end; } + .RV-FlexGrid__Item__Container--left { + display: grid; + justify-content: start; } + .RV-FlexGrid__Item__Container--right { + display: grid; + justify-content: end; } + .RV-FlexGrid__Item__Container--horizontalCenter { + display: grid; + justify-content: center; } + .RV-FlexGrid__Item__Container--verticalCenter { + display: grid; + align-items: center; } + .RV-FlexGrid__Item__Container--center { + display: grid; + justify-content: center; + display: grid; + align-items: center; } + +.RV-ContentCrop__Container, .RV-ContentCrop__Container * { + overflow: hidden; + word-break: break-all; } + +.RV-ContentCrop__Container img { + width: 100%; + height: 100%; + object-fit: cover; } + +.RV-ContentCrop__Container--left img { + object-position: left; } + +.RV-ContentCrop__Container--center img { + object-position: center; } + +.RV-ContentCrop__Container--top img { + object-position: top; } + +.RV-ContentCrop__Container--bottom img { + object-position: botom; } + +.RV-ContentCrop__Container--center img { + object-position: center; } + +.RV-Fan__Container--vertical { + flex-direction: column; + width: max-content; } + +.RV-Fan__Container--vertical .RV-Fan__Surface { + width: 320px; + min-height: 280px; } + +.RV-Fan__Container--horizontal { + flex-direction: row; } + +.RV-Fan__Container--horizontal .RV-Fan__Surface { + min-width: 320px; + height: 280px; } + +.RV-Fan__Container--auto { + flex-flow: row wrap; } + +.RV-Fan__Container--auto .RV-Fan__Surface { + width: calc(100% - 320px); + min-width: 320px; + height: 280px; } + +.RV-Fan__Container--fullWidth .RV-Fan__Base, .RV-Fan__Container--fullWidth .RV-Fan__Surface { + flex-grow: 1; } + +.RV-Fan__Container { + display: flex; } + +.RV-Fan__Base { + height: 280px; + width: 320px; + flex: 0 0 auto; } + +.RV-Fan__Surface, .RV-Fan__Surface * { + overflow: hidden; + word-break: break-all; } + +.RV-Fan__Surface img { + width: 100%; + height: 100%; + object-fit: cover; } + +.RV-Fan__Surface--left img { + object-position: left; } + +.RV-Fan__Surface--center img { + object-position: center; } + +.RV-Fan__Surface--top img { + object-position: top; } + +.RV-Fan__Surface--bottom img { + object-position: botom; } + +.RV-Fan__Surface--center img { + object-position: center; } + +.RV-FullWidthContent__Container { + width: 100%; } + +.RV-FullWidthContent__Item { + width: 100%; } + .RV-FullWidthContent__Item, .RV-FullWidthContent__Item * { + overflow: hidden; + word-break: break-all; } + .RV-FullWidthContent__Item img { + width: 100%; + height: 100%; + object-fit: cover; } + .RV-FullWidthContent__Item--left img { + object-position: left; } + .RV-FullWidthContent__Item--center img { + object-position: center; } + .RV-FullWidthContent__Item--top img { + object-position: top; } + .RV-FullWidthContent__Item--bottom img { + object-position: botom; } + .RV-FullWidthContent__Item--center img { + object-position: center; } + +.RV-BoxShadow { + position: relative; + float: left; + width: 40%; + margin: 2em 10px 4em; + background: #fff; + box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; } + .RV-BoxShadow:before, .RV-BoxShadow:after { + content: ""; + position: absolute; + z-index: -2; } + .RV-BoxShadow--simple { + box-shadow: 0 0 20px #6b5690; } + .RV-BoxShadow--raised:after { + box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; } + .RV-BoxShadow--liftedCorners:before, .RV-BoxShadow--liftedCorners:after { + bottom: 15px; + left: 10px; + width: 50%; + height: 20%; + max-width: 300px; + box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7); + transform: rotate(-3deg); } + .RV-BoxShadow--liftedCorners:after { + right: 10px; + left: auto; + transform: rotate(3deg); } + +.RV-ElementList__Container { + list-style-type: none; + margin: 0; + padding: 0; + top: 0; + bottom: 0; + left: 0; + right: 0; + border: none; } + +.RV-ElementList__Item { + margin: 0; + padding: 0; + top: 0; + bottom: 0; + left: 0; + right: 0; + border: none; } + +.RV-Spacing__Outer--small { + margin: 10px; } + +.RV-Spacing__Outer--medium { + margin: 25px; } + +.RV-Spacing__Outer--large { + margin: 35px; } + +.RV-Spacing__Inner--small { + padding: 10px; } + .RV-Spacing__Inner--small { + gap: 10px; } + +.RV-Spacing__Inner--medium { + padding: 25px; } + .RV-Spacing__Inner--medium { + gap: 25px; } + +.RV-Spacing__Inner--large { + padding: 35px; } + .RV-Spacing__Inner--large { + gap: 35px; } + +.RV-Iconized__Container { + position: relative; } + .RV-Iconized__Container--medium { + top: -.5em; } + .RV-Iconized__Container--large { + top: -1.03073em; } + .RV-Iconized__Container--huge { + top: -2.05em; } + +.RV-Iconized__Icon { + margin: 0; + padding: 0; + top: 0; + bottom: 0; + left: 0; + right: 0; + border: none; } + +.RV-Iconized__Container--small .RV-Iconized__Icon { + width: 1em; + height: 1em; + position: relative; + top: .125em; } + +.RV-Iconized__Container--medium .RV-Iconized__Icon { + width: 2em; + height: 2em; + position: relative; + top: .625em; } + +.RV-Iconized__Container--large .RV-Iconized__Icon { + width: 3em; + height: 3em; + position: relative; + top: 1.15573em; } + +.RV-Iconized__Container--huge .RV-Iconized__Icon { + width: 5em; + height: 5em; + position: relative; + top: 2.175em; } + +.RV-ImageGrid__Container { + list-style-type: none; + margin: 0; + padding: 0; + top: 0; + bottom: 0; + left: 0; + right: 0; + border: none; } + +.RV-ImageGrid__Item { + margin: 0; + padding: 0; + top: 0; + bottom: 0; + left: 0; + right: 0; + border: none; } + +.RV-ImageGrid__Container { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); + grid-template-rows: repeat(auto-fill, minmax(300px, 1fr)); + grid-auto-rows: minmax(300px, 1fr); } + +.RV-ImageGrid__Item__Container { + display: grid; } + .RV-ImageGrid__Item__Container--top { + display: grid; + align-content: start; } + .RV-ImageGrid__Item__Container--bottom { + display: grid; + align-content: end; } + .RV-ImageGrid__Item__Container--left { + display: grid; + justify-content: start; } + .RV-ImageGrid__Item__Container--right { + display: grid; + justify-content: end; } + .RV-ImageGrid__Item__Container--horizontalCenter { + display: grid; + justify-content: center; } + .RV-ImageGrid__Item__Container--verticalCenter { + display: grid; + align-items: center; } + .RV-ImageGrid__Item__Container--center { + display: grid; + justify-content: center; + display: grid; + align-items: center; } + +.RV-ImageGrid__Container { + padding: 25px; } + .RV-ImageGrid__Container__Container { + gap: 25px; } + +.RV-ImageGrid__Item, .RV-ImageGrid__Item * { + overflow: hidden; + word-break: break-all; } + +.RV-ImageGrid__Item img { + width: 100%; + height: 100%; + object-fit: cover; } + +.RV-ImageGrid__Item--left img { + object-position: left; } + +.RV-ImageGrid__Item--center img { + object-position: center; } + +.RV-ImageGrid__Item--top img { + object-position: top; } + +.RV-ImageGrid__Item--bottom img { + object-position: botom; } + +.RV-ImageGrid__Item--center img { + object-position: center; } + +.RV-ImageGrid__Item img { + object-position: center; } + @font-face { font-family: Crimson; src: url("fonts/Crimson/CrimsonText-Regular.ttf"), url("fonts/Crimson/CrimsonText-Bold.ttf"), url("fonts/Crimson/CrimsonText-Italic.ttf"); } @@ -178,8 +599,9 @@ body { .LP-Input .LP-Input__Field { border: none; border-bottom: 1px solid #565656; - padding: 8px; - margin-bottom: 30px; } + 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 { margin-bottom: 29px; border-bottom: 2px solid #76323F; @@ -199,14 +621,17 @@ body { color: #f9f9f9; } .LP-Input .LP-Input__Label { font-family: Montserrat, Helvetica, sans-serif; - font-size: 16px; } + font-size: 16px; + white-space: wrap; + overflow: hidden; } .LP-Input .LP-Input__Message { font-family: Montserrat, Helvetica, sans-serif; font-style: italic; font-size: 13px; padding: 3px; position: relative; - top: -30px; } + top: -30px; + overflow: hidden; } .LP-Input--error .LP-Input__Field { margin-bottom: 25px; border-bottom: 2px solid #76323F; @@ -583,44 +1008,161 @@ body { .LP-PlaceList .LP-Pagination { margin-top: 50px; } -.LP-LinkList__List { - list-style-type: none; - display: grid; - grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); - margin: 0; - padding: 0; } - .LP-LinkList__List .LP-LinkList__Item { +.LP-LinkList { + padding: 10px; + align-items: center; } + .LP-LinkList__Container { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); + grid-template-rows: repeat(auto-fill, minmax(3em, 1fr)); + grid-auto-rows: minmax(3em, 1fr); } + .LP-LinkList__Item__Container { + display: grid; } + .LP-LinkList__Item__Container--top { + display: grid; + align-content: start; } + .LP-LinkList__Item__Container--bottom { + display: grid; + align-content: end; } + .LP-LinkList__Item__Container--left { + display: grid; + justify-content: start; } + .LP-LinkList__Item__Container--right { + display: grid; + justify-content: end; } + .LP-LinkList__Item__Container--horizontalCenter { + display: grid; + justify-content: center; } + .LP-LinkList__Item__Container--verticalCenter { + display: grid; + align-items: center; } + .LP-LinkList__Item__Container--center { + display: grid; + justify-content: center; + display: grid; + align-items: center; } + .LP-LinkList__Container { + list-style-type: none; + margin: 0; + padding: 0; + top: 0; + bottom: 0; + left: 0; + right: 0; + border: none; } + .LP-LinkList__Item { + margin: 0; + padding: 0; + top: 0; + bottom: 0; + left: 0; + right: 0; + border: none; } + .LP-LinkList__Container { + gap: 10px; } + .LP-LinkList .LP-LinkList__Item { border-left: 1px solid #C09F80; width: calc(100% - 1px); - margin-top: 12px; } - .LP-LinkList__List .LP-LinkList__Item .LP-Link { - padding: 1em 0 1em 1em; - width: calc(100% - 1em); + overflow: hidden; + display: grid; + align-items: center; + display: flex; + flex-direction: row; + height: 100%; } + .LP-LinkList .LP-LinkList__Item--multiRow { + flex-wrap: wrap; } + .LP-LinkList .LP-LinkList__Item--column { + display: flex; + flex-direction: column; } + .LP-LinkList .LP-LinkList__Item .LP-LinkList__ItemHover { + opacity: 0.5; + display: grid; + justify-content: end; + flex-grow: 0; + flex-shrink: 0; + width: min-content; + flex-basis: min-content; } + .LP-LinkList .LP-LinkList__Item:hover { + background-color: #f9f9f9; } + .LP-LinkList .LP-LinkList__Item:hover .LP-LinkList__ItemHover { + opacity: 1; } + .LP-LinkList .LP-Link { + min-width: min-content; + width: 100%; + padding: 10px; } + .LP-LinkList .LP-Link__Container { + display: grid; } + .LP-LinkList .LP-Link__Container--top { + display: grid; + align-content: start; } + .LP-LinkList .LP-Link__Container--bottom { + display: grid; + align-content: end; } + .LP-LinkList .LP-Link__Container--left { + display: grid; + justify-content: start; } + .LP-LinkList .LP-Link__Container--right { + display: grid; + justify-content: end; } + .LP-LinkList .LP-Link__Container--horizontalCenter { + display: grid; + justify-content: center; } + .LP-LinkList .LP-Link__Container--verticalCenter { + display: grid; + align-items: center; } + .LP-LinkList .LP-Link__Container--center { + display: grid; + justify-content: center; + display: grid; + align-items: center; } + .LP-LinkList .LP-Link, .LP-LinkList .LP-Link--normal { + flex-grow: 3; + flex-shrink: 3; } + .LP-LinkList .LP-Link--narrower { + flex-grow: 1; + flex-shrink: 5; } + .LP-LinkList .LP-Link--narrow { + flex-grow: 2; + flex-shrink: 4; } + .LP-LinkList .LP-Link--wide { + flex-grow: 4; + flex-shrink: 2; } + .LP-LinkList .LP-Link--wider { + flex-grow: 5; + flex-shrink: 1; } + .LP-LinkList .LP-Link--fixedSize { + flex-grow: 0; + flex-shrink: 0; + width: min-content; + flex-basis: 100px; } + .LP-LinkList .LP-Link__Container { + gap: 10px; } + .LP-LinkList .LP-LinkAdd { + height: 0; } + .LP-LinkList .LP-LinkAdd__Container { + position: relative; + top: -39px; } + .LP-LinkList .LP-LinkAdd__Container .LP-Form__Fieldset { + min-width: unset; } + .LP-LinkList .LP-LinkAdd__Container .LP-Form { display: block; - color: #565656; } - .LP-LinkList__List .LP-LinkList__Item .LP-Link--iconized { - padding-top: 0; - padding-bottom: 1.1em; } - .LP-LinkList__List .LP-LinkList__Item .LP-Link--iconized:hover { - background-color: #ccc !important; } - .LP-LinkList__List .LP-LinkList__Item .LP-Link--iconized .LP-Text { - padding-top: .1em; } - .LP-LinkList__List .LP-LinkList__Item .LP-Link:hover { - background-color: #f9f9f9; - color: #76323F; } - .LP-LinkList__List .LP-LinkList__Item .LP-Link .LP-Text { - color: inherit; } + min-width: 0px; } -.LP-Link__Icon { - width: 2em; - height: 2em; - fill: #76323F; - line-height: 5em; } +.LP-LinkAdd { + display: none; } -.LP-LinkList__Item .LP-Link__Icon { - position: relative; - top: .7em; - margin-right: .6em; } +.LP-LinkAdd__Trigger { + display: none; } + +.LP-LinkAdd__TriggerLabel { + cursor: pointer; + display: contents; } + +.LP-LinkAdd__Trigger:checked, .LP-LinkAdd__Trigger:checked + .LP-LinkAdd__TriggerLabel { + display: none; } + +.LP-LinkAdd__Trigger:checked ~ .LP-LinkAdd { + display: block; } .LP-Footer { margin-top: 75px; @@ -643,98 +1185,193 @@ body { .LP-Footer .LP-LinkList__List .LP-LinkList__Item .LP-Link:hover { background-color: inherit; } -.LP-Form { - display: flex; - flex-direction: column; - align-items: center; } - .LP-Form .LP-Form__Fieldset { - border: none; - max-width: 1200px; - min-width: 750px; } - .LP-Form .LP-Form__Fieldset .LP-Form__Legend { - margin: 0; - padding: 0; - font-family: Montserrat, Helvetica, sans-serif; - font-size: 21px; } - .LP-Form .LP-Form__Fieldset .LP-Form__Composition { - display: flex; - flex-direction: row; - justify-content: space-between; } - .LP-Form .LP-Form__Fieldset .LP-Form__Composition .LP-Form__Field { - flex: 3 2 100px; - padding: 6px 15px; } - .LP-Form .LP-Form__Fieldset .LP-Form__Composition .LP-Form__Field--wider { - flex: 5 2; } - .LP-Form .LP-Form__Fieldset .LP-Form__Composition .LP-Form__Field--wide { - flex: 4 2; } - .LP-Form .LP-Form__Fieldset .LP-Form__Composition .LP-Form__Field--narrow { - flex: 2 1; } - .LP-Form .LP-Form__Fieldset .LP-Form__Composition .LP-Form__Field--narrower { - flex: 1 2; } - .LP-Form .LP-Form__Fieldset .LP-Form__Composition--buttons { - justify-content: flex-end; } - .LP-Form .LP-Form__Fieldset .LP-Form__Composition .LP-Form__Button { - flex-grow: 0; - padding-left: 0; - min-width: 130px; } - .LP-Form .LP-Form__Fieldset .LP-Form__Composition .LP-Form__Button .LP-Link { - display: contents; } - .LP-Form .LP-Form__Fieldset .LP-Form__Composition .LP-Form__InfoText .LP-Paragraph { - font-family: Montserrat, Helvetica, sans-serif; - color: #565656; } +.LP-Form--inline .LP-Form__Legend, .LP-Form--inline .LP-Input__Label { + display: none; } -@media (max-width: 750px) { - .LP-Form .LP-Form__Fieldset { - min-width: unset; } } - -@media (max-width: 650px) { - .LP-Form .LP-Form__Fieldset .LP-Form__Composition--breakable { - display: flex; - flex-direction: column; - justify-content: space-between; } } +.LP-Form--inline .LP-Form__Button { + flex-grow: 0; + flex-shrink: 0; + width: min-content; + flex-basis: max-content; } @media (max-width: 450px) { - .LP-Form .LP-Form__Fieldset .LP-Form__Composition { + .LP-Form:not(.LP-Form--inline) .LP-Form__Composition { + flex-wrap: wrap; } } + +.LP-Form:not(.LP-Form--inline) .LP-Form__Button { + flex-grow: 0; + flex-shrink: 0; + width: min-content; + flex-basis: 130px; } + @media (max-width: 450px) { + .LP-Form:not(.LP-Form--inline) .LP-Form__Button { + flex-grow: 0; + flex-shrink: 0; + width: min-content; + flex-basis: 100%; } } + +.LP-Form .LP-Form__Fieldset { + margin: 0; + padding: 0; + top: 0; + bottom: 0; + left: 0; + right: 0; + border: none; + max-width: 1200px; + min-width: 750px; } + @media (max-width: 750px) { + .LP-Form .LP-Form__Fieldset { + min-width: unset; } } + +.LP-Form .LP-Form__Legend { + margin: 0; + padding: 0; + font-family: Montserrat, Helvetica, sans-serif; + font-size: 21px; } + +.LP-Form .LP-Form__Composition { + display: flex; + flex-direction: row; + height: 100%; + padding: 10px; } + .LP-Form .LP-Form__Composition--multiRow { + flex-wrap: wrap; } + .LP-Form .LP-Form__Composition--column { display: flex; - flex-direction: column; - justify-content: space-between; } - .LP-Form .LP-Form__Fieldset .LP-Form__Composition .LP-Form__Field:not(.LP-Form__Button) { - flex: 3 1 100px; - padding: 12px 15px; } - .LP-Form .LP-Form__Fieldset .LP-Form__Composition .LP-Form__Button { - padding: 0 15px; } - .LP-Form .LP-Form__Fieldset .LP-Form__Composition--buttons { - justify-content: flex-end; } } + flex-direction: column; } + .LP-Form .LP-Form__Composition { + gap: 10px; } + @media (max-width: 650px) { + .LP-Form .LP-Form__Composition--breakable { + flex-wrap: wrap; } } + .LP-Form .LP-Form__Composition--buttons { + justify-content: flex-end; + padding: 10px; } + .LP-Form .LP-Form__Composition--buttons__Container { + gap: 10px; } -.LP-ImageGrid .LP-ImageGrid__List { - list-style-type: none; - display: grid; - grid-template-columns: repeat(auto-fit, 300px); - align-content: space-around; - justify-content: center; - margin: 0px; - padding: 0px; } +.LP-Form .LP-Form__Field { + min-width: min-content; + width: 100%; } + .LP-Form .LP-Form__Field__Container { + display: grid; } + .LP-Form .LP-Form__Field__Container--top { + display: grid; + align-content: start; } + .LP-Form .LP-Form__Field__Container--bottom { + display: grid; + align-content: end; } + .LP-Form .LP-Form__Field__Container--left { + display: grid; + justify-content: start; } + .LP-Form .LP-Form__Field__Container--right { + display: grid; + justify-content: end; } + .LP-Form .LP-Form__Field__Container--horizontalCenter { + display: grid; + justify-content: center; } + .LP-Form .LP-Form__Field__Container--verticalCenter { + display: grid; + align-items: center; } + .LP-Form .LP-Form__Field__Container--center { + display: grid; + justify-content: center; + display: grid; + align-items: center; } + .LP-Form .LP-Form__Field, .LP-Form .LP-Form__Field--normal { + flex-grow: 3; + flex-shrink: 3; } + .LP-Form .LP-Form__Field--narrower { + flex-grow: 1; + flex-shrink: 5; } + .LP-Form .LP-Form__Field--narrow { + flex-grow: 2; + flex-shrink: 4; } + .LP-Form .LP-Form__Field--wide { + flex-grow: 4; + flex-shrink: 2; } + .LP-Form .LP-Form__Field--wider { + flex-grow: 5; + flex-shrink: 1; } + .LP-Form .LP-Form__Field--fixedSize { + flex-grow: 0; + flex-shrink: 0; + width: min-content; + flex-basis: 100px; } -.LP-ImageGrid .LP-ImageGrid__Item { - margin-top: 10px; } +.LP-Form .LP-Form__InfoText .LP-Paragraph { + font-family: Montserrat, Helvetica, sans-serif; + color: #565656; } -.LP-ImageGrid .LP-Link { - overflow: hidden; } - -.LP-ImageGrid .LP-Image { - box-shadow: 0 0 5px #565656; - height: 200px; - width: 290px; - object-fit: cover; } - -@media (max-width: 650px) { - .LP-ImageGrid .LP-ImageGrid__List { - grid-template-columns: 1fr; } - .LP-ImageGrid .LP-ImageGrid__List .LP-Image { - box-shadow: 0 0 5px #565656; - height: auto; - width: 100%; - object-fit: cover; } } +.LP-ImageGrid { + padding: 10px; } + .LP-ImageGrid__Container { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); + grid-template-rows: repeat(auto-fill, minmax(200px, 1fr)); + grid-auto-rows: minmax(200px, 1fr); } + .LP-ImageGrid__Item__Container { + display: grid; } + .LP-ImageGrid__Item__Container--top { + display: grid; + align-content: start; } + .LP-ImageGrid__Item__Container--bottom { + display: grid; + align-content: end; } + .LP-ImageGrid__Item__Container--left { + display: grid; + justify-content: start; } + .LP-ImageGrid__Item__Container--right { + display: grid; + justify-content: end; } + .LP-ImageGrid__Item__Container--horizontalCenter { + display: grid; + justify-content: center; } + .LP-ImageGrid__Item__Container--verticalCenter { + display: grid; + align-items: center; } + .LP-ImageGrid__Item__Container--center { + display: grid; + justify-content: center; + display: grid; + align-items: center; } + .LP-ImageGrid__Container { + list-style-type: none; + margin: 0; + padding: 0; + top: 0; + bottom: 0; + left: 0; + right: 0; + border: none; } + .LP-ImageGrid__Item { + margin: 0; + padding: 0; + top: 0; + bottom: 0; + left: 0; + right: 0; + border: none; } + .LP-ImageGrid__Container { + gap: 10px; } + .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; diff --git a/lostplaces/lostplaces_app/templates/photo_album/photo_album_create.html b/lostplaces/lostplaces_app/templates/photo_album/photo_album_create.html new file mode 100644 index 0000000..b6e84ba --- /dev/null +++ b/lostplaces/lostplaces_app/templates/photo_album/photo_album_create.html @@ -0,0 +1,41 @@ +{% extends 'global.html'%} + +{% block title %}Submit a photo album{% endblock %} + +{% block additional_menu_items %} +
  • Edit place
    • +
  • Delete place
    • +{% endblock additional_menu_items %} + +{% block maincontent %} +
    +
    + Submit a photo album for {{place.name}} + {% csrf_token %} +
    +
    + {% include 'partials/form/inputField.html' with field=form.url %} +
    +
    + +
    +
    + {% include 'partials/form/inputField.html' with field=form.label %} +
    +
    + +
    +
    + +
    +
    + + + +
    +
    +
    +
    +{% endblock maincontent %} \ No newline at end of file diff --git a/lostplaces/lostplaces_app/templates/place/place_detail.html b/lostplaces/lostplaces_app/templates/place/place_detail.html index 01edddf..1e2970f 100644 --- a/lostplaces/lostplaces_app/templates/place/place_detail.html +++ b/lostplaces/lostplaces_app/templates/place/place_detail.html @@ -1,58 +1,97 @@ {% extends 'global.html'%} {% load static %} {% block additional_head %} - - + + {% endblock additional_head %} {% load thumbnail %} {% block title %}{{place.name}}{% endblock %} {% block additional_menu_items %} -
  • Edit place
    • -
  • Delete place
    • +
  • Edit place
    • +
  • Delete place
    • {% endblock additional_menu_items %} - + {% block maincontent %}
    -
    -

    {{ place.name }}

    - {% if place.images.first.filename.hero.url %} -
    - -
    - {% endif %} -
    +
    +

    {{ place.name }}

    + {% if place.images.first.filename.hero.url %} +
    + +
    + {% endif %} +
    -
    -

    {{ place.description }}

    -
    +
    +

    {{ place.description }}

    +
    + +
    +

    Map-Links

    + {% include 'partials/osm_map.html' %} +
    + +
    +
    + +
    +

    Photoalben

    +
    + +
    +
    + +
    +

    Bilder

    +
    +
      + {% for place_image in place.images.all %} +
    • + +
      • + {% endfor %} +
    +
    +
    -
    -

    Map-Links

    - {% include 'partials/osm_map.html' %} -
    - -
    -
    - -
    -

    Bilder

    -
    -
      - {% for place_image in place.images.all %} -
    • - -
      • - {% endfor %} -
    -
    -
    -
    {% endblock maincontent %} \ No newline at end of file diff --git a/lostplaces/lostplaces_app/urls.py b/lostplaces/lostplaces_app/urls.py index 2a2bbd7..cc2516d 100644 --- a/lostplaces/lostplaces_app/urls.py +++ b/lostplaces/lostplaces_app/urls.py @@ -6,7 +6,8 @@ from .views import ( SignUpView, PlaceCreateView, PlaceUpdateView, - PlaceDeleteView + PlaceDeleteView, + PhotoAlbumCreateView ) urlpatterns = [ @@ -14,6 +15,7 @@ urlpatterns = [ path('signup/', SignUpView.as_view(), name='signup'), path('place//', PlaceDetailView.as_view(), name='place_detail'), path('place/create/', PlaceCreateView.as_view(), name='place_create'), + path('photo_album/create/', PhotoAlbumCreateView.as_view(), name='photo_album_create'), path('place/update//', PlaceUpdateView.as_view(), name='place_edit'), path('place/delete//', PlaceDeleteView.as_view(), name='place_delete'), path('place/', PlaceListView.as_view(), name='place_list') diff --git a/lostplaces/lostplaces_app/views.py b/lostplaces/lostplaces_app/views.py index 4a5b894..bca02bc 100644 --- a/lostplaces/lostplaces_app/views.py +++ b/lostplaces/lostplaces_app/views.py @@ -18,7 +18,7 @@ from .forms import ( PlaceForm, PlaceImageCreateForm ) -from .models import Place, PlaceImage, Voucher +from .models import Place, PlaceImage, Voucher, PhotoAlbum # Create your views here. @@ -155,3 +155,42 @@ class PlaceDeleteView(IsAuthenticated, IsSubmitter, DeleteView): def delete(self, request, *args, **kwargs): messages.success(self.request, self.success_message) return super().delete(request, *args, **kwargs) + +class AlbumCreateView(IsAuthenticated, View): + def get(self, request, *args, **kwargs): + url = request.GET['url'] + place_id = request.GET['place_id'] + place = Place.objects.get(pk=place_id) + photo_album = PhotoAlbum() + photo_album.url = url + photo_album.place = place + photo_album.submitted_by = request.user + photo_album.save() + print(photo_album) + return redirect(reverse_lazy('place_detail', kwargs={'pk': place_id})) + +class PhotoAlbumCreateView(IsAuthenticated, CreateView): + model = PhotoAlbum + fields = ['url', 'label'] + template_name = 'photo_album/photo_album_create.html' + success_message = 'Photo album submitted' + + def get(self, request, place_id, *args, **kwargs): + self.place = Place.objects.get(pk=place_id) + return super().get(request, *args, **kwargs) + + def post(self, request, place_id, *args, **kwargs): + self.place = Place.objects.get(pk=place_id) + response = super().post(request, *args, **kwargs) + self.object.place = self.place + self.object.submitted_by = request.user + self.object.save() + return response + + def get_context_data(self, **kwargs): + context = super().get_context_data(**kwargs) + context['place'] = self.place + return context + + def get_success_url(self): + return reverse_lazy('place_detail', kwargs={'pk': self.place.id}) \ No newline at end of file