34 Replies
The gold colors which is #FDD700 suppose to be my accent color I am considering to change the color of the drag & drop dashed border but then again it is important.
When there are no items the drag & drop moves to the top and every time you add item it goes below it and move until reaches that point and scroll bar appears.
Since this is the first website I am creating on my own I may have done the main content part a bit wrong. Maybe after user adds item I should remove drag & drop part.
Can you give some more context like what is this website for? And on drag nd drop option there's click to select what does that do
When you click it opens to select files. This website is for mobile game I enjoy. It's purpose it to help optimize gameplay, strategy, showing statistic and where to improve it. 🤔
In that case you should keep the drag nd drop where it is no need to move it everywhere when user's interacting as too much movement could cause user to confuse after that you have this extract button but when the user is all done what do they click on to enter/exit?
It will show loading pop-up with message and progress and once it is done it will redirect user to the next step/page.
Extract button will do this?
Yes sir.
Aighty then, i suggest you move the small 'restart' button in the corner on the top on the side with the drag and drop and give the extract button the golden color
Thank you sir. I forgot to mention that the users will upload multiple images most of the time so drag&drop field most likely will move to the bottom right away but if it is less then 10 items the scroll bar disappears and drag&drop field moves with the items. I also thought to leave it at the bottom drag&drop field permanently but then the top part will be empty. Not sure if this changes anything in your mind. Thank you once again for suggestion.
For that you could just set a maximum bars for the images for example you have 5 bars for the images now if someone uploads 6 or more than 10 images like you said then the scroll bar should appear not before
That way even if someone uploads less images like 5 or 3 the design won't look odd
I could give u a visual demonstration of what I'm trying to say if you don't get it
I would like that sir. Thank you.
@azka Like this sir ?
No wait I'll send u
I am also not sure if the container to leave it at fixed vh or let it shrink based on the items.
Okay sir.
Im havin a bit of technical problem rn I'll send you the demonstration later
there u go
Sorry has a lunch. Well the first 3 I had similar just instead 5 items it was 10.
The last part I am still not quite sure. So if the items are below 5 we will use accent color to highlight it. In the image you highlighted first 3 and the last 2 not highlighted but the issue is that the last 2 will have to be placeholders then because if the user uploads 3 images it will only create 3 items. I may have understood it wrong. Also thank yout for demonstration.
your welcome, i think you can solve that issue using min & max height then if you don't want extra placeholders.
I am having troubles currently with min & max learning. I understand that it wont go below minimum set value and wont go above maximum set value but when I set both min and max for container both in vh or vw it doesn't seem to work it or it works I just don't understand it very well. 😔
its okay just keep learning and practicing you'll probably get it also is this a static website or dynamic?
I am not really sure about the full concept of static and dynamic but I assume static is when layout is not moving and dynamic when layout does :/
Yes, you're right for static you use html/css only and to make it functional/interactable or dynamic you use js so is ur website static or dynamic ?
For now I am planning to make dynamic, I specifically chose dynamic to learn JS, JSNode for back-end.
And then once I understand it I plan to convert it to TypeScript.
Great, for this drag nd drop feature ur using youre probably gonna have to use css nd js together then, im still learning js otherwise i might've been able to help you goodluck i hope you're able to complete this website im pretty sure you can also ask questions related to coding in this section maybe someone else can help you achieve what you're after
Thank you.
@azka Here this is the result.
I also wanted to ask do you need JS to make scrollbar appear after 5 items ?
As you can see at the blue arrow it partially showing an item and since container is set to vh it will change based on viewport so no matter what I do it won't be perfect.
I also wanted to ask about red arrow which should be
padding-right: 1rem; when the scrollbar appears and when there is none it should remove it.
So my question would be does this require JS also ?
Do I need JS for both questions ?
:/
I think if I could set
padding-left: 1rem; to the scrollbar itself I think it would fix both problems.Check ur msgs
I just made import / export nav bar page. Looking for suggestion for improvement if needed.
When user drags & drops JSON file it will automatically remove drop & drag field since it can only be one file in this case I am debating whether to leave remove icon or switch to restart icon or do something like replace icon/mini drag & drop field that would automatically replace file skipping one more step. Then when user clicks import I will process data and upload to database. The export is to export JSON file from the database. I am debating whether I should add some additional information to define what it exports
@azka I am looking advise if you are available.
Anyone else is also free to do suggestions.
Replace option 1:
Replace option 2:
Replace option 3 (new Icon + previous method):
Or a layout shift:
You a button for the user to delete the image they uploaded so i don't think a replace button is needed here cause even if they do wanna replace they just do so by deleting the previous one they have just uploaded
As for the information for exporting part if you think users might not be able to understand what that does then just put a little info icon below the image-container and put the information about exports in that section and display that note when user click on the info icon