I have an ASP.NET MVC Core web app that changes from year to year and has test data. The URLs are (examples):
2017.applicationdomain.com
2018.applicationdomain.com
test.applicationdomain.com
On my _Layout page, I am currently commenting and un-commenting the NAVBAR section just before publishing for each URL (as you can see, the navbar color and brand text changes based on the URL).
See code here:
<!--Selector-->
<!--2017-->
#*<nav class="navbar navbar-expand-md navbar-dark" style="min-height:55px;background-color:#035338">
<div class="container">
<a asp-area="" asp-controller="Cashier" asp-action="Index" class="navbar-brand">
2017 Data
</a>*#
<!--Test-->
<nav class="navbar navbar-expand-md navbar-dark" style="min-height:55px;background-color:#221958">
<div class="container">
<a asp-area="" asp-controller="cashier" asp-action="index" class="navbar-brand">
test data
</a>
<!--2018-->
#*<nav class="navbar navbar-expand-md navbar-dark bg-dark" style="min-height:55px;">
<div class="container">
<a asp-area="" asp-controller="Cashier" asp-action="Index" class="navbar-brand">
<img class="img-fluid" src="~/images/CUF_Logo1.png" />
</a>*#
<!--End of Selector-->
I want to automate this, without creating too much overhead on my view which will slow it down. I know I can do a switch statement on a string compare of #Context.Request.Host but I always thought you were supposed to have minimal code on the view, leave the code in the controller.
Anyone have any thoughts on how this can be done server side in the controller rather than all in the view?
Related
I have a Bootstrap v5 site I'm trying to make accessible. The navbar has the company logo that links to the home page, but also a nav link "Home" that also links to the home page. WAVE evaluation tool triggers a warning for "Redundant link" since they go the same place and are next to each other.
The code:
<nav class="navbar navbar-expand-lg" aria-label="Main navigation">
<div class="container">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggler" aria-controls="navbarToggler" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="/">
<img src="/Images/company_logo.png" alt="Company logo">
</a>
<div class="collapse navbar-collapse" id="navbarToggler">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item"><a class="nav-link active" href="/">Home</a></li>
<li class="nav-item"><a class="nav-link" href="/home/about">About</a></li>
<li class="nav-item"><a class="nav-link" href="/home/contact">Contact</a></li>
</ul>
</div>
</div>
</nav>
The obvious solutions are:
Solution 1: Remove the logo link. But everything I read is that it's a best practice to have your logo be a home page link.
Solution 2: Remove the Home link. But for accessibility I hear you should include a Home link in the navigation.
Solution 3: Somehow combine the logo and Home nav-item into a single link, but not sure how Bootstrap would support that especially in mobile view.
Solution 4: Ignore it, it's a WAVE "Alert" not a "Warning".
I'm leaning towards Solution 1; it seems to be the most accessible.
What would you do?
Solution 1: It's pretty common to have a logo be a link to the home page. It's fine to keep it.
Solution 2: There is nothing in the Web Content Accessibility Guidelines (WCAG) that says you must have a "Home" link in the navigation menu. It's a pretty common thing to have but is not required. You could remove it if you wanted to but don't do it for any accessibility reasons. Remove it if it doesn't fit with your design, otherwise keep it.
Solution 3: Often there are elements between the company logo and the first menu item with the "Home" link (such as a login link or search button) so combining the links could be very messy. There's no need to pursue this route.
Solution 4: Absolutely, except it's a Warning, not an Alert. You had it backwards. WAVE is just being proactive and pointing out usability issues that could affect some users but it's not an accessibility (WCAG) failure. It's fine to ignore this Warning if you're happy with your design.
I'm making a website for my IT project. I've made the header but the problem is, the navigation buttons are the wrong way around but they are the right way around in the code.
I've tried rewriting the code but this literally didn't work...
<nav class="navbar navbar-dark bg-primary justify-content-between navbar-expand-lg">
<div class="navbar-brand">
Computer Misuse
</div>
<div class="navbar-nav ml-auto">
<a class="nav-item nav-link" href="phishing.php">Phishing & Viruses</a>
<a class="nav-item nav-link" href="copyright.php">Copyright Law</a>
<a class="nav-item nav-link" href="health.php">Health & Safety</a>
</div>
</nav>
This is the navigation bar that is included using php's "require_once" method in all of the pages.
https://imgur.com/jbTQrms whenever I click "Copyright Law" it takes me to "Health and Safety" and vice versa but "Phishing & Viruses" works fine.
Anybody have any ideas why this is happening? I am using Bootstrap 4
Nevermind, literally didn't see (after I checked over them) that the wrong stuff was in the wrong files so the href was wrong. oof.
I am doing the freecodecamp workthroughs and it hit an error in the script that tests the product landing page project I'm working on.
Problem is as follows:
When I click a .nav-link button in the nav element, I am taken to the corresponding section of the landing page.
However, my code as far as I can tell, does exactly that.
What in my code is causing this error?
My code, JS test hamburger hidden in logo in top left
Thanks for the help.
<header>
<div id="header">
<img id="header-img" src="https://i.imgur.com/KIqkWAZ.png" alt="handbooker helper logo"/>
<nav id="nav-bar">
<a class="nav-link" href="#infoLinks">Episodes</a>
<a class="nav-link" href="#how-it-works">How It Works</a>
<a class="nav-link" href="https://critrole.com/">More from Critical Role</a>
</nav>
</div>
</header>
Considering the script assumes all your nav-links correspond to a target on the same page, there's no way you can pass that story.
I tried it by replacing the link
href="https://critrole.com/"
with href="#test" and creating a div with id test, and the story passed after doing so.
This is what I'm getting right now For some reason when I try to get my navbar logo to appear, instead of the logo, I get some type of picture icon. Here is my code:
`<body>
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
<img src="/images/logo.png">Imito
<div class="collapse navbar-collapse" id="topNavBar">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
Hot
</li>
<li class="nav-item">
New
</li>
<li class="nav-item">
Top
</li>
</ul>
</div>`
This happens when your program is unable to locate the picture in the specified path or it cannot access the specified path. My advice is to place the logo in the same folder as the html code and just use <img src = "logo.png">
It should definitely work then.
Can’t comment so had to use an answer, have you checked the console to see if it returns a 404 for the image. It sounds like the file you specified cannot be found?
I am running some acceptance tests in Yii2 using Codeception version 2.0.16. My Unit tests and functional tests work perfectly, but the acceptance tests seem to be showing a weird result. I have the following acceptance tests defined:
I->wantTo('test link discovery');
$I->seeElement(Locator::href('/index-test.php/user/create'));
$I->seeLink('Create User');
Now the 'href' and the link text refer to the same link. But when I run this, I get the following error:
1) Failed to test link discovery in UserCept (/var/www/localhost/<mysite>/tests/codeception/acceptance/UserCept.php)
Couldn't see link "Create User": Element located either by name, CSS or XPath 'a' was not found on page.
Scenario Steps:
12. I see link "Create User"
11. I see element "//a[#href=normalize-space('/index-test.php/user/create')]"
As you can see, the Locator function finds the link, but the "seeLink" request fails. This is quite surprising; here is the actual page returned:(partial from '_output' results page "UserCept.fail")
...
<body>
<div class="wrap">
<nav role="navigation" class="navbar navbar-fixed-top" id="w1"><div class="container"><div class="navbar-header"><button data-target="#w1-collapse" data-toggle="collapse" class="navbar-toggle" type="button"><span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span></button>NGO Review</div><div class="collapse navbar-collapse" id="w1-collapse"><ul class="navbar-nav navbar-right nav" id="w2"><li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Login</li></ul></div></div></nav>
<div class="container">
<ul class="breadcrumb"><li>Home</li>
<li class="active">Users</li>
</ul> <div class="user-index">
<h1>Users</h1>
<p>
Create User </p>
<div class="grid-view" id="w0"><div class="summary">Showing <b>1-2</b> of <b>2</b> items.</div>
<table class="table table-striped table-bordered"><thead>
<tr><th>#</th><th><a data-sort="username" href="/index-test.php/user/index?sort=username">E-Mail Address</a></th><th><a data-sort="first_name" href="/index-test.php/user/index?sort=first_name">First Name</a></th><th><a data-sort="last_name" href="/index-test.php/user/index?sort=last_name">Last Name</a></th><th><a data-sort="last_login_time" href="/index-test.php/user/index?sort=last_login_time">Last Login Time</a></th><th class="action-column"> </th></tr>
</thead>
...
(key code is Create User)
Obviously I can use the Locator syntax to run the tests, but I would very much appreciate it if someone can explain why the Locator function works correctly, but the "seeLink" fails? Thanks.