Comments (20)
I put all the things into a single issue just to have a well-known todo list. I'm gonna gradually tackle these at time permits.
from istio.io.
Selected tab stays active
Button highlights in green
Indicate current document in nav
I have code for these deployed to my staging environment from last week. I'll merge upstream later today and look at the simplest way to get the diff set implemented.
search box
Google custom search is likely the simplest thing to use here since it'll just be a snippet of JS
from istio.io.
@geeknoid in moving to the new path based nav it looks like we lost some changes (at least that's my guess)
- the tabs are no longer staying active when a document in the category is selected. I'll look at this
- the current document is not highlighted in the left nav
I'll look at these
from istio.io.
Dave, you said you had fixed those items a while ago, but I don't believe you ever submitted the changes to the repo...
from istio.io.
@geeknoid Ahh... likely true. Some might not have work with the changes. Regardless, the above are done.
Also, just did a PR to change the large-ish search box and replace with a magnifying glass icon.
from istio.io.
The site looks better and better every day. I've trimmed the list of items in this issue to reflect current reality.
from istio.io.
We can collapse these:
Shrinking the browser window horizontally causes the search box to start overlapping the doc top nav bar. We probably want something cleaner there.
When shrinking the size of the browser window horizontally, we should be hiding the left-hand nav bar when things get tight.
To a single issue that we need the site to be usable on mobile devices. We need to choose whether we want to target iPads, iPad-mini, and/or phones. Basically we need to revisit where breakpoints in CSS are and whether responsive design pieces in Bootstrap were left out.
from istio.io.
Updated to this morning's state.
from istio.io.
Updated to latest state. This adds a few things, and takes a few things away...
from istio.io.
The ALT text associated with images isn't being displayed. For example, if I go to >https://istio.io/docs/reference/what-is-istio/architecture.html and over my mouse over the >diagram, I don't see a tooltip.
there is no title attribute on the image. The use of the alt attribute for the tooltip is not cross-browser compatible (see https://developer.mozilla.org/en-US/docs/Defining_Cross-Browser_Tooltips).
from istio.io.
Thanks, I've updated all uses of ALT with TITLE instead. Works great.
from istio.io.
Edit: I was looking at an older version of the site, this has changed/mostly fixed alreday - though there is still more blank on the left than the right and for long lines the overlaid "copy" button is looking strange when mixed with underlying text
Adding:
- (already mostly fixed) Fixed width isn't great (not sure how easy it is to change the style for variable width)
and related:
- Some examples have long lines that you need to scroll for a while on the tiny box to see all of it, maybe should have \ inserted to become multiline with smaller width that fits (e.g. nodeport section of https://istio.io/docs/samples/bookinfo.html )
from istio.io.
from istio.io.
We should put the title of the current document in the top nav bar for reference. Between the sailboat and the top-right nav links, on every page except the landing page.
I think a better option is to put the title in an h1
tag at the top of the content. This aligns with nearly 100% of all blogs and doc sites I can think of.
Another idea might be to a) get rid of the tabs and replace with a dropdown menu under Docs, and b) implement breadcrumbs.
With breadcrumbs you would see the path of the current document. So something like Home > About
or Home > Docs > Concepts > What is Istio?
. Each segment is clickable. The advantage is that this takes up less screen real estate and is a pretty commonly seen thing
from istio.io.
Breadcrumbs might be nice indeed. Worth exploring.
from istio.io.
As per our chat, I think I still prefer the tabs - the breadcrumbs basically don't give you any navigation/orientation that the left nav doesn't so when the left nav is visible it's just duplicated info. The drop-down menu under Docs does provide horizontal navigation but is not particularly intuitive and makes that top bar look a bit weird.
Another thing that I think might look good is having (or just using, it might be in the cloned grpc.io stylesheets) a separate style for the "subheading"/description - "This page is about...", etc. Otherwise it looks a bit like an oddly short first paragraph.
from istio.io.
Adding some items here
-
Font size for text is fixed in pixels which works poorly on high res screens. Suggest we switch to 12pt fo readability
-
Links in docs are hard to distinguish from plain text. Should increase font-weight to make more distinct
from istio.io.
people are complaining about the <copy> button/link:
- it's transparent over text below which makes both hard to read (should have some background)
- the examples often include the output of the command, which makes them un pastable as is - we should ideally split the command from the output (would look nicer too) - maybe we could put $ in front of command and copy would copy only lines with a $ ?
from istio.io.
from istio.io.
I'm closing this bug since it was getting too confusing. I've opened separate bugs to track outstanding issues.
I've pushed changes to systematically separate command-lines from their output, so I think that issue is taken care of. Regarding the button/link problem, I don't understand what that refers to so I didn't open another bug for that. Please go ahead and submit a separate bug with more detail on that issue. Thanks.
from istio.io.
Related Issues (20)
- Update BookInfo w/ Virtual Machine documentation
- Need to doc and show users how to verify mtls is enabled in ambient. HOT 15
- update hugo to v0.130.0
- [release-1.22] Update sidecar getting started guide
- fix flaky test in /ambient/usage/extend-waypoint-wasm
- authz-tcp doctest flake HOT 1
- SPIRE docs should stop using hand-constructed YAML templates and just use upstream SPIRE Helm charts
- scrolling issue in long pages with lots of headings HOT 1
- Istio Ambient Documentation HOT 1
- Update Hugo to match what is in the tools image
- [release-1.22] Update to v1 in all API examples HOT 1
- [release-1.22] Add note to eBPF blog about not being supported any more
- update hugo to v0.132.0 HOT 1
- Broken link in the blog "Istio has deprecated its In-Cluster Operator" HOT 3
- Chinese version of doc site content need to be updated
- virtual machine WorkloadEntry documentation unclear HOT 1
- Gateway API test flakes HOT 3
- Only install the Gateway API CRDs once? HOT 1
- Mark operator docs as deprecated and update FAQ for choosing an installation method
- Change or clarify istioctl installation docs HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from istio.io.