search

codingdavinci / relaunch2018

This is the new Coding da Vinci website (online since September 2020).
https://codingdavinci.de
GNU General Public License v2.0
1 stars 1 forks source link

Creating a single Event Page #3

Closed samu-workopen closed 5 years ago

samu-workopen commented 6 years ago

Presentation of Coding da Vinci events. Each made up of multiple parts over several months: onboarding events > kick-off weekend > sprint phase > Award ceremony. 1 scrolling page is enough (no sub-pages needed).

As a regional organiser I want to easily create and update content on my event page so that I can develop rich content quickly and easily.

As a founder I want creation of “Event X” to be tied to the creation of a new category “Event X” applied throughout the website (dataset & project archives, news) so that all event content is linked.

samu-workopen commented 6 years ago

@lucyWMDE Cleaning this task up

lohengruen commented 6 years ago

Wireframe https://www.figma.com/file/tdfEKrzA5eBrRv0d1zGMu4/EventPage-Wireframe?node-id=1%3A2

Snater commented 5 years ago

A few questions on the screen design to make things clearer for me:

lohengruen commented 5 years ago

• I can see the problem. If it were a normal square, the css could easily contain the text (with something like overflow:hidden), but since it's tilted this becomes tricky. I will do some research on this. The only idea I have at the moment is to contain the text inside a invisible circle that is inside the square. (A bit clumsy, I know ;)

• The challenges are just a placeholder for any kind of box with image and text inside. At the moment we only need them for some of the event pages (if the creators have content that fits), but I can image them being useful somewhere else on the page (e.g., the dataset thumbnails on the Daten page are very similar: https://www.figma.com/file/dnh4F4VAXHUwLCW7dH29gUdM/Data-Wireframe With the challenge boxes as well as with the tilted squares the idea is to give the event organisers a building block system that they can use to create an event page that fits their information and is also distinctive to the other event pages. We will probably create more building blocks in this style.

• I agree, Veranstalter is not a really fitting name for this, but I can't think of a better alternative

Snater commented 5 years ago
lohengruen commented 5 years ago

• thats a good idea with the rotation. We could test it for the moment, and if it's not working properly, we could think about doing a different design. I'm not too fixated on this design and can try out different stuff. But all ideas will probably have in common that we either need to limit the number of characters in the element or need to set the font size to scale automatically • 👍 • As far as I know, at the moment the event organisers collect all the logos and upload them. Which I'd prefer, because I'd like to tint all the logos in one particular color. This could either be done manually in Photoshop or other software, but it would also be possible using SVG filters right in the backend. I'll try to make a CodePen demonstrating the color-effect.

lucyWMDE commented 5 years ago

to the "Veranstalter" issue, they are the institutions/organisations that make up the regional event team. i.e. Veranstalter != data-contributing institutions. They won't exist or be used in the system elsewhere, so it's probably enough to just upload them manually.

lucyWMDE commented 5 years ago

We actually have a whole system for the different logos that should be on this page:

@lohengruen so far we don't have the logos of the data-contributing cultural institutions on the events page. So far they are only listed on the Dokumentation page. The idea was to shift the content from the Dokumentation page to the archive event pages so that we no longer need the Dokumentation page. However, we'll probably need a different kind of layout so that we don't just fill up the whole page with logos... Let's talk again about the content of the event page and finalise before we go further with implementation of this screen design.

Snater commented 5 years ago

Re: Rotated squares.

I tried to find a solution and did some testing, but nothing that would fit our case came along. The general problem is that when counter-rotating the text, it does not respect the container's box for wrapping.

Limiting characters is nothing bad per se. In general, would even be possible to detect overflow in order to automate setting vertical alignment or scaling down the font size when the page loads (though not a recommended operation as you would have to loop until you find a position/font size that fits), but doing that in combination with the rotation is very complex as far as I am aware. We might be able to use some library (like three.js), but even that would likely turn out to be rather complex and cause quite some load time.

I like the optics of the rotated squares, but it seems technical complexity would exceed overall value.

lucyWMDE commented 5 years ago

@lohengruen here you can find the contents (mainly just headings) of the single event page: https://docs.google.com/document/d/12TjhDurZiWg08Bnz_SMzl4bXo5m5eBxAafN1AyNV_FA/edit#heading=h.bx7f036gu1sf - some of it is new (the post-event documentation parts) so please think about an appropriate layout... ideas on the old CdV Nord event page.

lohengruen commented 5 years ago

About the rotated squares: The only viable solution I see would be to use images for the squares (instead of divs with real text). But I agree with Henning, we might spend too much time for such a minor detail and it might cause some weird problems, so I think its best to come up with a different design. I will include something in the new event page screen design, along with the new content. I'll have it finished tomorrow.

Snater commented 5 years ago

@lohengruen Module "Image Left & Right": What is meant by "… or centered without text" in the explanation? I suppose there will always be some text for images (at least the attribution). More importantly regarding the layout, I don't think it will work out properly to center the image on one column and put the text next to it. If we want to center an image, the text should probably also be below the image. Then again, how do we determine the maximum image height (or width) when an image shall be centered? I don't think we can assume proper exact size of the original image uploaded. Is the different image caption colour on the two examples intentional?

(I don't think it's relevant, but I am going to combine "Text Block Left & Right" and "Image Left & Right" by implementing a text block left and a text block right paragraph type, both with an optional image, so we have only 2 instead of 4 paragraph types in that purpose.)

Snater commented 5 years ago

@lohengruen Module "Tables": How flexible is the table style/layout meant to be / will there only be that particular use-case for tables? For example, will the style of each column always be like that or is the content editor supposed to assign styles per column (cells)? Technically, instead of implementing a dedicated table paragraph, it is a lot easier to have a full-width rich text paragraph that allows placing a table. We can assign a table style to switch the table colour scheme and we could of course apply column styles by that "global" table style as well--if column styles are supposed to be fixed. Then again, if styles are fixed, how would a fourth column look like? Or is the use-case limited to three columns? Detail: The green background is not part of the colour palette, contrast of that green to white is quite low (https://contrastchecker.com/?c=FFFFFF&b=D0E8E2).

Snater commented 5 years ago

@lohengruen @lucyWMDE Module "Button": Will there be only those two buttons ("Newsletter abonnieren", "Jetzt registrieren!") or should that be somewhat flexible? If there should only be those two buttons, I would probably implement a paragraph for each button, as that is less prone to errors from a content editor perspective. If it should be flexible (there may be more buttons with other icons now or in the future etc.), I would implement styles that could be applied to links in a rich text field. (As noted above, there will be a full-width rich text paragraph anyway, so buttons may be centered across the viewport width.)

Snater commented 5 years ago

As for the screen design, I will implement all modules as paragraphs, so they can be added optionally to an event page. I would just make two exceptions to that:

lucyWMDE commented 5 years ago

Cool.

lucyWMDE commented 5 years ago

Further general paragraph styles are in the Design system and About figma layouts. Keep an eye out for the "box module" paragraph style - the idea is to make a very versatile paragraph style that can be implemented differently to give different results. You can find it used for...

hope it can work out that way...

Snater commented 5 years ago

OK, thanks for the hint. I think we can have some general implementation for the boxes. There would be an optional header image and there needs to be a field to specify the background colour. The body will probably just be a rich text field. And then there seems to be an optional footer as well.

I am picking up the award winners first, so I could close the project related issues on that.

Snater commented 5 years ago

That box group seems to work very well, except in Internet Explorer. I will have to do a IE roundup anyhow. Will get dirty.

Snater commented 5 years ago

This is about to be done. Todos left:

Snater commented 5 years ago

Timeline module is done. Only header left on this ticket.

lohengruen commented 5 years ago

Here are the tiles for the header animation: https://www.dropbox.com/s/v3khfk8foz5ukcw/Tiles_Event_small.jpg?dl=0

In contrast to the landing page header, there are fewer but bigger tiles for the event header. I've used a 400px size for each square and removed the white space between them to keep file size low.

The idea behind the event header is that users can easily create their own versions. I've included a small tutorial on how to replace images directly in the Figma file. There, users can export a new Tiles.jpg file, which they can then upload to the event page. If possible, this should be done by a simple "Replace background image" button in the backend.

lohengruen commented 5 years ago

In the backend, there should also be an option to customise the color overlay for the header animation. This is a full size gradient, that runs from top to bottom of the header. The top color is always "#F1ECE8" and the bottom color can be selected from the individual colour scheme. background: linear-gradient(180deg, #F1ECE8 0%, #5DC4B8 100%); mix-blend-mode: multiply; opacity: 0.75;

See the Figma file for reference (Header > Gradient)

Snater commented 5 years ago

Default header is implemented. Just need a field here for uploading an individual header file. I edited the static header files so they behave like a pattern without seams on the edges. The current page does not have it like that, but I think its nicer. I think it's sufficient for event organizers to just upload that compiled front tiles image and leave that static background the same on every event page. I will implement it like that.

lohengruen commented 5 years ago

Good idea with the continuous tiling! And I agree, there is probably no need to customise the static background.

Snater commented 5 years ago

Option to customize header is implemented--seems like this ticket is about to be done as well for now. Just missing regional identity implementation here.

Snater commented 5 years ago

Implemented additional fields on the event content type to capture regional identity. Currently, the two colours are applied to the header and to the winners list. Applying color to addition fields would not be a big effort.