WNavigationBar looks different from WidgetGallery, also has other classes
Replies (6)
RE: WNavigationBar looks different from WidgetGallery, also has other classes - Added by Mark Travis 16 days ago
Here's the way I did it. I might change this since I did this before I learned other techniques using pure CSS with Flex, but take from it what you will.
I still learn new ways of doing things daily, so this may or may not be the ideal way, but it works for now.
Here's an image of my solution:
I defined the following in a WTemplate:
<nav class="navbar navbar-main navbar-expand-md mt-4 top-1 px-0 mx-4 shadow-none border-radius-xl z-index-sticky" id="navbarBlur" data-scroll="true">
<div class="container-fluid py-1 px-3">
<a class="navbar-brand m-0" >
<img src="graphics/Fractal-Rock-Sol-graphic-transparent-61x80.png" class="navbar-brand-img h-100" alt="main_logo"></img>
<span class="ms-1 font-weight-bold">Fractal Insights : ${current-version}</span>
</a>
<div class="navbar-collapse mt-sm-0 mt-2 me-md-0 me-sm-4" id="navbar">
<div class="ms-md-auto pe-md-3 d-flex align-items-center">
</div>
<ul class="navbar-nav justify-content-end">
<li class="nav-item">
${log-out-and-admin-button}
</li>
</ul>
</div>
</div>
</nav>
Then used this c++ code:
addLanguage(Lang("en", "/", "en", "English"));
addLanguage(Lang("fr", "/fr/", "fr", "Français (French)"));
addLanguage(Lang("hi", "/hi/", "हिंदी", "हिन्दी भाषा (Hindi)"));
auto editAccountButton = std::make_unique<Wt::WPushButton>();
editAccountButton->setText("<span class=\"btn-inner--icon\"><i class=\"material-icons\">account_circle</i></span>");
editAccountButton->setTextFormat(Wt::TextFormat::XHTML);
editAccountButton->setStyleClass("btn-info");
editAccountButton_ = editAccountButton.get();
auto logoutButton = std::make_unique<Wt::WPushButton>("Logout");
logoutButton_ = logoutButton.get();
logoutButton_->addStyleClass("btn-danger");
logoutButton_->setMargin(10,Wt::Side::Left);
logoutButton_->setMargin(10,Wt::Side::Right);
auto adminButton = std::make_unique<Wt::WPushButton>("Admin");
adminButton_ = adminButton.get();
adminButton_->addStyleClass("btn-success");
adminButton_->setMargin(10,Wt::Side::Right);
adminButton_->hide();
auto languageChoiceComboBox = std::make_unique<Wt::WComboBox>();
languageChoiceComboBox_ = languageChoiceComboBox.get();
languageChoiceComboBox_->setStyleClass("text-center");
languageChoiceComboBox_->setMargin(10,Wt::Side::Left);
languageChoiceComboBox_->setMargin(20,Wt::Side::Top);
languageChoiceComboBox_->setWidth(Wt::WLength(100, Wt::LengthUnit::Percentage));
languageChoiceComboBox_->setHeight(Wt::WLength(35, Wt::LengthUnit::Percentage));
for (int i = 0; i < languages.size(); i++) {
languageChoiceComboBox_->addItem(languages[i].longDescription_);
}
languageChoiceComboBox_->changed().connect([=]{
setLanguage(languageChoiceComboBox_->currentIndex());
});
auto rightBoundingBox = std::make_unique<Wt::WContainerWidget>();
rightBoundingBox->addWidget(std::move(editAccountButton));
rightBoundingBox->addWidget(std::move(logoutButton));
rightBoundingBox->addWidget(std::move(adminButton));
rightBoundingBox->addWidget(std::move(languageChoiceComboBox));
appLayout->bindWidget("log-out-and-admin-button",std::move(rightBoundingBox));
And I believe these are the relevant css rules from material-dashboard.css (Creative Tim)
@media (min-width: 768px) {
.navbar-expand-md {
flex-wrap: nowrap;
justify-content: flex-start;
}
}
.navbar > .container-fluid
{
display: flex;
flex-wrap: inherit;
align-items: center;
justify-content: space-between;
}
.d-flex {
display: flex !important;
}
@media (min-width: 768px) {
.navbar-expand-md .navbar-nav {
flex-direction: row;
}
}
.justify-content-end {
justify-content: flex-end !important;
}
I think that's everything. Most of the other rules had to do with margins, padding, gutters, etc.
In another instance, I used col-3, col-7, col-2 and left col-7 blank. That was a sledgehammer approach.