Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

develop this new layout for products pages #56

Open
devopstoday11 opened this issue Mar 13, 2023 · 50 comments
Open

develop this new layout for products pages #56

devopstoday11 opened this issue Mar 13, 2023 · 50 comments
Assignees

Comments

@devopstoday11
Copy link
Contributor

We did new background with new colors and layout for products related pages. I will record video and mention requirements in it.
We need this by tomorrow afternoon, if possible today itself, please. (IST time zone).

@tfsojon
Copy link
Collaborator

tfsojon commented Mar 13, 2023

Video link not attached!

@devopstoday11
Copy link
Contributor Author

@tfsojon
here is the video link,
https://www.loom.com/share/174e0feb553843378a2f241ca9e50146

@devopstoday11
Copy link
Contributor Author

@devopstoday11
Copy link
Contributor Author

@tfsojon , any updates?

@tfsojon
Copy link
Collaborator

tfsojon commented Mar 14, 2023

Working on it. hope deliver you the first task within 30min.

@devopstoday11
Copy link
Contributor Author

sounds good. thank you.
please do PR to chandu branch only. I want to check changes in my local and add all our content and extra pages.

@tfsojon
Copy link
Collaborator

tfsojon commented Mar 14, 2023

Pages are created. PR - #57
But in the header-menu we can not make options for text-colors.
Because hugo only provide 2 extra params in menu. which I used for icon and subtitle.
So I have to keep the black color for now.
But, When you are ready to publish then I can change the color with CSS child selector.

Please NOTE: We are going on vacation today (Mar 14) and will be back to Office on Saturday. Hopefully the remaining task will be done by Saturday or Sunday

@tfsojon
Copy link
Collaborator

tfsojon commented Mar 14, 2023

The menu
image

The Content
image

@devopstoday11
Copy link
Contributor Author

@tfsojon ,
so what you have finished for now is adding the products pages, correct?
working on header menu thing is still pending which will be done on Saturday or Sunday, right?

@tfsojon
Copy link
Collaborator

tfsojon commented Mar 14, 2023

Yes!

@devopstoday11
Copy link
Contributor Author

@tfsojon
Banner size and look & feel is not looking same as I shown in the video. Please fix it.

The design I showed you in the video is taken from this site - superops.ai

@devopstoday11
Copy link
Contributor Author

@tfsojon
Also, you missed the pages for "Open Source"

@tfsojon
Copy link
Collaborator

tfsojon commented Mar 14, 2023

If possible. Please provide the design file to me.

@devopstoday11
Copy link
Contributor Author

I don't have it now. our designer is off today.
you can check the superops.ai website. he copied the design from that site. there is no difference at all. @tfsojon

@tfsojon
Copy link
Collaborator

tfsojon commented Mar 14, 2023

On the video it's look like full-width with maybe 40px gap each side.
But on the side the background size is centered.
What should I follow?
Also header-background is white there. do you want white bg also?

@devopstoday11
Copy link
Contributor Author

@tfsojon
I responded here with this video based on what I understood.
https://www.loom.com/share/e3a0c2bfc68a4b60b734a985295b4c1d

@tfsojon
Copy link
Collaborator

tfsojon commented Mar 18, 2023

@devopstoday11

updated platform & open-source header

You can update the top-bottom gap by changing the padding value and the width value from here.

image

@devopstoday11
Copy link
Contributor Author

@tfsojon please submit PR so that I can test

@tfsojon
Copy link
Collaborator

tfsojon commented Mar 21, 2023

already submitted #59

@devopstoday11
Copy link
Contributor Author

@tfsojon
here are the references for the header bars (primary header bar and secondary header bar). I remember you asking about a reference.
Both these sites are references,
https://www.sage.com/en-gb/
https://betterstack.com/

explained in the video,
https://www.loom.com/share/2ce2483d3133486bb7a6ec844b96b5ea

@devopstoday11
Copy link
Contributor Author

@tfsojon
another modification explained. please get this also done soon.
https://www.loom.com/share/3203382917ef49b599cd0a31cdfd1ffd

@devopstoday11
Copy link
Contributor Author

@tfsojon , mentioned two videos above to work on. please check them.

@devopstoday11
Copy link
Contributor Author

@tfsojon , update on the above tasks?

@tfsojon
Copy link
Collaborator

tfsojon commented Apr 1, 2023

Will start work on today!

@devopstoday11
Copy link
Contributor Author

@tfsojon, any updates?

@tfsojon
Copy link
Collaborator

tfsojon commented Apr 2, 2023

@tfsojon, any updates?

Started working yesterday. Hopefully the update will come soon today.

tfsojon added a commit to tfsojon/intelops-website that referenced this issue Apr 2, 2023
added secondary-header && updated content-aria and footer
@tfsojon
Copy link
Collaborator

tfsojon commented Apr 2, 2023

here is the PR of last two videos - #67

  • Added Secondary header with brand-logo w link and platform/open-source logo

  • Updated content and image width you mentioned in first video

  • The footer area call-to-action position updated.

  • Secondary navigation content you can update from each platform or open-source page.
    image

@devopstoday11
Copy link
Contributor Author

@tfsojon
It looks like you missed working on Open Source pages. For the pages under "Open Source" the content alignment still has an old look & feel. Update for those pages as well.
Also, for pages under Platform & Open Source, I think the content area alignment can be improved slightly more. Can you please send screenshots of which files I need to modify if I want to play with content area alignment myself?

@devopstoday11
Copy link
Contributor Author

devopstoday11 commented Apr 2, 2023

@tfsojon, need this urgent fix. Main branch is failing on both netlify and local.

When I merged your PR67 to my chandu branch and tested in local , all worked.
After merging chandu branch to main branch and when I did "hugo server" command, site is not getting built. I tried locally and also directly on github (netlify build also failed).

Here is the error I got in local

$ hugo server
Start building sites … 
hugo v0.109.0-47b12b83e636224e5e601813ff3e6790c191e371+extended windows/amd64 BuildDate=2022-12-23T10:38:11Z VendorInfo=gohugoio
ERROR 2023/04/02 14:28:28 render of "page" failed: "C:\Users\devops\OneDrive - intelops\Documents\GitHub\website\themes\delta\layouts\author\single.html:11:18": execute of template failed: template: author/single.html:11:18: executing "main" at <$img.Fill>: nil pointer evaluating resource.Resource.Fill
Error: Error building site: failed to render pages: render of "page" failed: "C:\Users\devops\OneDrive - intelops\Documents\GitHub\website\themes\delta\layouts\author\single.html:11:18": execute of template failed: template: author/single.html:11:18: executing "main" at <$img.Fill>: nil pointer evaluating resource.Resource.Fill
Built in 493 ms

Here is the error log from netlify

2:22:35 PM: Start building sites …
2:22:35 PM: hugo v0.85.0-724D5DB5+extended linux/amd64 BuildDate=2021-07-05T10:46:28Z VendorInfo=gohugoio
2:22:38 PM: ERROR 2023/04/02 19:22:38 render of "page" failed: "/opt/build/repo/themes/delta/layouts/author/single.html:11:18": execute of template failed: template: author/single.html:11:18: executing "main" at <$img.Fill>: nil pointer evaluating resource.Resource.Fill
2:22:38 PM: Error: Error building site: failed to render pages: render of "page" failed: "/opt/build/repo/themes/delta/layouts/author/single.html:11:18": execute of template failed: template: author/single.html:11:18: executing "main" at <$img.Fill>: nil pointer evaluating resource.Resource.Fill

I did compare main and chandu branches on github. No difference.
image

Note:-

By the way, can I delete .forestry folder since we are not using Forestry anymore? can you delete it and test if it is causing any issues after deleting this folder, please. This is separate topic from above mentioned main branch issue.

@devopstoday11
Copy link
Contributor Author

devopstoday11 commented Apr 2, 2023

@tfsojon , when I retest chandu branch in my local, it is also failing. Now I am not able to build the site to see any of my changes. Please fix the issue.

chandu branch error in my local laptop:-

$ hugo server
Start building sites … 
hugo v0.109.0-47b12b83e636224e5e601813ff3e6790c191e371+extended windows/amd64 BuildDate=2022-12-23T10:38:11Z VendorInfo=gohugoio
ERROR 2023/04/02 14:59:52 render of "page" failed: "C:\Users\devops\OneDrive - intelops\Documents\GitHub\website\themes\delta\layouts\author\single.html:11:18": execute of template failed: template: author/single.html:11:18: executing "main" at <$img.Fill>: nil pointer evaluating resource.Resource.Fill
Error: Error building site: failed to render pages: render of "page" failed: "C:\Users\devops\OneDrive - intelops\Documents\GitHub\website\themes\delta\layouts\author\single.html:11:18": execute of template failed: template: author/single.html:11:18: executing "main" at <$img.Fill>: nil pointer evaluating resource.Resource.Fill
Built in 506 ms

while fixing this issue, please take chandu branch and work on that one and submit PR. @tfsojon

@tfsojon
Copy link
Collaborator

tfsojon commented Apr 3, 2023

@devopstoday11 fix image-issue, updated header style && open-source page #69

@devopstoday11
Copy link
Contributor Author

@tfsojon , where can I change the header bar color if I want to play with it?

@devopstoday11
Copy link
Contributor Author

@tfsojon
how to remove the background for the images in the content area?
we want to remove the square box background behind the images, how can I do it?

image

@devopstoday11
Copy link
Contributor Author

@tfsojon , we need functionality to add the call-to-action section (row) wherever we want. please develop it.
I am showing the reference in this screenshot with red pointed arrows.
image

@devopstoday11
Copy link
Contributor Author

@tfsojon , This is how the new Compage product page looks like with finalized new images and the alignment spaces between images and text. How to achieve this kind of look and feel ? (I am not talking about font style or colors, I am mainly asking about alignment, look & feel, spacing, images properly getting rendered, etc.)
Also, if you observe, some of the rows in the screenshot in the content area have different background colors; how to set a different color for each row?

screenshot1 (little bit more zoomed in screenshot than screenshot2)
image

screenshot2
image

@devopstoday11
Copy link
Contributor Author

@tfsojon , please make the dropdown look neat and clean (wherever we have dropdowns, all those dropdowns should look like this) as shown in the screenshot.
Items you see in this screenshot in the dropdown items are our projects' names and their finalized logos icons. We want to use them on the website, especially in the dropdown.
Please make it work. If you have already added the functionality, please guide me on how to use it.

image

@devopstoday11
Copy link
Contributor Author

@tfsojon , I added many items above; please work on them all.

@tfsojon
Copy link
Collaborator

tfsojon commented Apr 5, 2023

@tfsojon how to remove the background for the images in the content area? we want to remove the square box background behind the images, how can I do it?

Removed background-color from /layouts/platform/single.html

image

@tfsojon
Copy link
Collaborator

tfsojon commented Apr 5, 2023

@devopstoday11 You can not place this anywhere in between loop content. like your example, that is not possible in hugo.
I need the design file to develop that call-to-action.

@tfsojon , we need functionality to add the call-to-action section (row) wherever we want. please develop it. I am showing the reference in this screenshot with red pointed arrows. image

@tfsojon
Copy link
Collaborator

tfsojon commented Apr 5, 2023

@devopstoday11

you can change the content-postition by changing the content_position value
image


you can set bg_color true or false for the section and color will apply based on banner bg_color.

image
image

image

@tfsojon , This is how the new Compage product page looks like with finalized new images and the alignment spaces between images and text. How to achieve this kind of look and feel ? (I am not talking about font style or colors, I am mainly asking about alignment, look & feel, spacing, images properly getting rendered, etc.) Also, if you observe, some of the rows in the screenshot in the content area have different background colors; how to set a different color for each row?

screenshot1 (little bit more zoomed in screenshot than screenshot2) image

@tfsojon
Copy link
Collaborator

tfsojon commented Apr 5, 2023

@devopstoday11 As I previously said about hugo, in this #56 (comment)
Hugo does not support multi-level menu. what I did is a small tweak.
You can change and update your menus from menus.en.toml

image

I updated the menu to look little more better
image

@tfsojon , please make the dropdown look neat and clean (wherever we have dropdowns, all those dropdowns should look like this) as shown in the screenshot. Items you see in this screenshot in the dropdown items are our projects' names and their finalized logos icons. We want to use them on the website, especially in the dropdown. Please make it work. If you have already added the functionality, please guide me on how to use it.

image

tfsojon added a commit to tfsojon/intelops-website that referenced this issue Apr 5, 2023
devopstoday11 added a commit that referenced this issue Apr 10, 2023
Updated added on issue #56 and #64
@devopstoday11
Copy link
Contributor Author

@tfsojon , how can I change header bar color and text color inside the header bar? I want to play with few colors for header bar and it's text.

@tfsojon
Copy link
Collaborator

tfsojon commented Apr 11, 2023

@tfsojon , how can I change header bar color and text color inside the header bar? I want to play with few colors for header bar and it's text.

image

@devopstoday11
Copy link
Contributor Author

@tfsojon , how can I change header bar color and text color inside the header bar? I want to play with few colors for header bar and it's text.

image

@tfsojon, thanks for those screenshots.
I tried playing. I am able to change both primary and secondary header bar colors and also all texts color in the menus.
But I was not able to figure out where to change text color which is next to the logos for the secondary header bar for platforms (compage, capten, opty) and for items in the Open Source. How to change those texts color too?


Also, when I changed logos (light to dark OR dark to light) in the params.toml file on line 11

logo = "images/logos/logo-light.svg"

all the logos (in the primary header bar and in footer area) are changing. I have two logo files in the assets (logo-light.svg and logo-dark.svg). I want to be able to use different logo files in different areas. How can I? @tfsojon

@tfsojon
Copy link
Collaborator

tfsojon commented Apr 13, 2023

change secondary header text color

image
image

change footer logo using footer_logo_dark = false/true

image

@devopstoday11
Copy link
Contributor Author

@tfsojon , thanks for the above info. I was able to play with logos and names.
How can I change the menu items text colors to play with colors?

image

@devopstoday11
Copy link
Contributor Author

@tfsojon , thanks for the above info. I was able to play with logos and names. How can I change the menu items text colors to play with colors?

image

@tfsojon , please respond to this query

@tfsojon
Copy link
Collaborator

tfsojon commented Apr 19, 2023

You can find a .nav-menu-text class. change the color of the .nav-menu-text

image

@devopstoday11
Copy link
Contributor Author

@tfsojon I meant I want to change the Hugo theme code or set the color in some configuration file, not by using inspect in the browser. How to change the Hugo code to give whatever color I want for the texts in both header bars independently?

@devopstoday11
Copy link
Contributor Author

@tfsojon ,
this is where I changed. Is this the correct place? And is this the only place?

image

devopstoday11 added a commit that referenced this issue Apr 19, 2023
* worked on platform page

* worked on open-source page

* added opty page

* updated platform-banner and dropdown

* updated platform & open-source header

* added internal guide doc

* added draft doc to show saas ui running steps in local

* added compage related first blog about persistent storage using crds

* corrected the wording

* modified images and names

* modified copyrights name

* added image and description for mahendra

* update on #56

added secondary-header && updated content-aria and footer

* update on #66

added support for svg image

* added new image files

* modified image file to svg

* fix image-issue, updated header style && open-source page

* replaced image

* updated names and added tags to blog

* added extra file to resolve conflicts

* removed extra file after conflicts resolved

* added few final images for compage

* added images for Compage product page

* update added on #64

* update added on #56

* added new blog on pixie script

* added logo-text in header-two

* blog: added blog for grpc-interceptors-using-go

* added image and description for azar

* fixed author details display issue

* added enhancing-your-pixie-pxl-script-by-manipulating-data blog

---------

Co-authored-by: Sojon <[email protected]>
Co-authored-by: Chandu Paladugu <[email protected]>
Co-authored-by: Sojon <[email protected]>
Co-authored-by: Mahendra <[email protected]>
Co-authored-by: Mahendra <[email protected]>
Co-authored-by: azar-intelops <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants