Oh goodness! I hadn't checked out the health page. So smart. Thanks, Darryl, you are an absolute delight, this is EXACTLY what I needed!
On Wed, Oct 18, 2023 at 1:50 PM [email protected] <[email protected]> wrote: > Carolyn, I couldn't help myself; had to try this out. > > Here's a working example I created based on the code in the DSpace Health > page components. The stuff in the ngbPanelHeader DIVs could be simpler, > but the button makes the entire header clickable and the SPANs provide a > visual indicator of whether the section is expanded or not. It could > easily be just the title of the section, but this is how the DSpace > elements were done so it matches the rest of the site. > > I just dropped this into one of my components and it seemed to work fine: > > <ngb-accordion #acc="ngbAccordion" activeIds="panel1"> > > <ngb-panel id="panel1"> > <ng-template ngbPanelHeader> > <div class="w-100 d-flex justify-content-between collapse-toggle" > ngbPanelToggle (click)="acc.toggle('panel1')"> > <button type="button" class="btn btn-link p-0" > (click)="$event.preventDefault()" > [attr.aria-expanded]="!acc.isExpanded('panel1')" > aria-controls="collapsePanels"> > Section 1 > </button> > <div class="text-right d-flex"> > <div class="ml-3 d-inline-block"> > <span *ngIf="acc.isExpanded('panel1')" class="fas > fa-chevron-up fa-fw"></span> > <span *ngIf="!acc.isExpanded('panel1')" class="fas > fa-chevron-down fa-fw"></span> > </div> > </div> > </div> > </ng-template> > <ng-template ngbPanelContent> > Content for section 1 > </ng-template> > </ngb-panel> > > <ngb-panel id="panel2"> > <ng-template ngbPanelHeader> > <div class="w-100 d-flex justify-content-between collapse-toggle" > ngbPanelToggle (click)="acc.toggle('panel2')"> > <button type="button" class="btn btn-link p-0" > (click)="$event.preventDefault()" > [attr.aria-expanded]="!acc.isExpanded('panel2')" > aria-controls="collapsePanels"> > Section 2 > </button> > <div class="text-right d-flex"> > <div class="ml-3 d-inline-block"> > <span *ngIf="acc.isExpanded('panel2')" class="fas > fa-chevron-up fa-fw"></span> > <span *ngIf="!acc.isExpanded('panel2')" class="fas > fa-chevron-down fa-fw"></span> > </div> > </div> > </div> > </ng-template> > <ng-template ngbPanelContent> > Content for section 2 > </ng-template> > </ngb-panel> > </ngb-accordion> > > > > > On Wednesday, October 18, 2023 at 11:14:09 AM UTC-6 [email protected] > wrote: > >> >> I think you are correct, the normal jquery libraries are not loaded, or >> are not loaded in such a way that the functions are available to you as >> they would be in a more traditional web application. Google turned up some >> suggestions on getting jquery into Angular apps, but I'm wondering if there >> might be an easier way. >> >> Accordions/collapse are definitely in the frontend -- when logged in, the >> right side nav menu has collapsible menu elements, and the Health page has >> a very typical looking accordion section. So the functionality is already >> there for sure. >> >> If you look at, for example, >> src/app/health-page/health-info/health-info.component.html DSpace seems >> to be using ngb-accordion to implement accordions rather than the >> typical jquery/Bootstrap accordions. ngb-accordion appears elsewhere in >> the code as well. Perhaps you could use that as a starting point? >> >> - Darryl >> >> On Tuesday, October 17, 2023 at 12:00:35 PM UTC-6 Carolyn Sullivan wrote: >> >>> @Darryl... thanks, that was definitely it :embarassed look : You're >>> awesome :) >>> >>> Potentially related issue... I'm trying to use Bootstrap 4 in my static >>> pages for the styling, but even code I copy directly from the Bootstrap >>> site without modifying doesn't display appropriately. For example, I'm >>> trying to replace our vanilla javascript custom accordions on the old >>> jsp page <https://ruor.uottawa.ca/faq.jsp> with the Collapse/Accordion >>> <https://getbootstrap.com/docs/4.0/components/collapse/>in the new >>> version, and the tabs don't open when clicked. >>> >>> [image: 101723_Bootstrap.PNG] >>> It's like it's not connecting to the files for jquery or something >>> still... has anyone seen anything like this? >>> >>> Thanks to everyone for your time and support! >>> >>> Carolyn. >>> >>> On Thursday, October 12, 2023 at 5:19:10 PM UTC-4 [email protected] >>> wrote: >>> >>>> I had a look at the custom "About" component I created for our site, >>>> and it does use translate for a header without error. >>>> >>>> I see that TranslateModule is imported in my theme's >>>> lazy-theme.module.ts so I assume (and I'm no Angular developer so I'm >>>> just kinda guessing here) that is how its made available to all the >>>> components. So I'm wondering if you forgot to import your component in >>>> lazy-theme.module.ts and that's maybe why it doesn't have translate >>>> available? In my lazy-theme.module.ts, after all the existing imports >>>> I added this for my 2 components: >>>> >>>> import { AboutComponent } from './app/info/about/about.component'; >>>> import { GuidelinesComponent } from >>>> './app/info/guidelines/guidelines.component'; >>>> >>>> and at the end of the DECLARATIONS array I added >>>> >>>> const DECLARATIONS = [ >>>> // All the default components are here >>>> >>>> AboutComponent, >>>> GuidelinesComponent, >>>> ]; >>>> >>>> >>>> If you have done all that and still have the error, then I'm afraid I'm >>>> at the edge of my Angular knowledge. Hopefully someone else can offer some >>>> suggestions >>>> >>>> - Darryl >>>> >>>> On Thursday, October 12, 2023 at 2:01:44 PM UTC-6 Carolyn Sullivan >>>> wrote: >>>> >>>>> Thanks everyone! Since my institution (the University of Ottawa in >>>>> Ontario, Canada) is a bilingual university, it's best practice for us to >>>>> have independent views in each language--otherwise, our webpages get very >>>>> bulky with the duplication of text. >>>>> >>>>> Adding the translation works fine on the home-news.component.html, but >>>>> when I try to do something similar in my created components, ie: >>>>> >>>>> <div class="container"> >>>>> <div class="row panel"> >>>>> <div class="col-md-12"> >>>>> <h3> >>>>> {{ 'uoresearch.head' | translate }} >>>>> </h3> >>>>> <div class="panel content"> >>>>> >>>>> </div> >>>>> </div> >>>>> </div> >>>>> </div> >>>>> >>>>> I end up getting >>>>> >>>>> error NG8004: No pipe found with name 'translate'. >>>>> >>>>> What could be causing this? I assume when the existing components >>>>> call the default components (ie: import { HomePageComponent as >>>>> BaseComponent } from '../../../../app/home-page/home-page.component';), >>>>> it's linking to something that calls the ngx translate module, but I can't >>>>> figure out what's going on. >>>>> >>>>> >>>>> >>>>> On Friday, October 6, 2023 at 11:46:43 AM UTC-4 [email protected] >>>>> wrote: >>>>> >>>>>> Carolyn, you could just place both the English and French text in >>>>>> your home-news.component.html file, and bypass the i18n stuff. Certainly >>>>>> not as elegant as having it switch based on the selected language, but it >>>>>> is easier. All the email I get from the Government of Canada just have >>>>>> both languages like that. :) >>>>>> >>>>>> DSpace does seem to set the lang attribute of the html tag to the >>>>>> selected language, so perhaps there's some fancy CSS you could do to >>>>>> show/hide the French and English sections based on the "fr" or "en" >>>>>> values >>>>>> there. I don't know if that's any less work than the i18n method, but it >>>>>> would give the appearance of being dynamic. >>>>>> >>>>>> - Darryl >>>>>> >>>>>> On Tuesday, October 3, 2023 at 8:11:18 AM UTC-6 Carolyn Sullivan >>>>>> wrote: >>>>>> >>>>>>> Thank you all so much for your responses! This is super helpful in >>>>>>> terms of learning more about customize the interface, and gives me some >>>>>>> direction for issues I need to be aware of (like figuring out an >>>>>>> alternative to tweaking code outside the theme). One more question: My >>>>>>> institution, uOttawa, is fully bilingual, which means all the text >>>>>>> needs to >>>>>>> be translated to both French and English. I think that means that >>>>>>> material >>>>>>> like the text on the home-news.component.html page needs to be defined >>>>>>> in >>>>>>> the i18n page, but part of me balks at the idea of adding 1000-word >>>>>>> definitions for labels... is there any other dynamic/Angular way of >>>>>>> doing >>>>>>> this, or is this, in fact, the way it's done? >>>>>>> >>>>>>> Thanks, >>>>>>> Carolyn. >>>>>>> >>>>>>> On Monday, October 2, 2023 at 2:00:52 PM UTC-4 [email protected] >>>>>>> wrote: >>>>>>> >>>>>>>> Our implementation looks very similar to Mark's. We created 2 >>>>>>>> additional components in the app/info directory of our theme, one >>>>>>>> for an About component and one for a Guidelines component. I started by >>>>>>>> just copying one of the existing "feedback" or "privacy" directories (I >>>>>>>> forget which one I used, but either will work) then changed the >>>>>>>> filename >>>>>>>> names, content, selectors etc. I modified lazy-theme.module.ts in >>>>>>>> my theme folder to import my 2 new components. This seems to mimic >>>>>>>> what >>>>>>>> Mark did according to that diff in Slack. >>>>>>>> >>>>>>>> Where Mark and I differ is how I added those 2 components to >>>>>>>> DSpace. We wanted an About menu at the start of the nav bar with a >>>>>>>> dropdown for our About and Guidelines pages, and wanted the URLs to be >>>>>>>> like >>>>>>>> the Feedback URL (/info/feedback) i.e. /info/about and >>>>>>>> /info/guidelines. To do this I modified the core >>>>>>>> /src/app/info/info-routing.module.ts and imported my 2 components >>>>>>>> there and added this right below the existing FEEDBACK_PATH path >>>>>>>> (around line 20) >>>>>>>> >>>>>>>> { >>>>>>>> path: 'about', >>>>>>>> component: AboutComponent, >>>>>>>> resolve: { breadcrumb: I18nBreadcrumbResolver }, >>>>>>>> data: { title: 'info.about.title', breadcrumbKey: >>>>>>>> 'info.about' }, >>>>>>>> }, >>>>>>>> { >>>>>>>> path: 'guidelines', >>>>>>>> component: GuidelinesComponent, >>>>>>>> resolve: { breadcrumb: I18nBreadcrumbResolver }, >>>>>>>> data: { title: 'info.guidelines.title', breadcrumbKey: >>>>>>>> 'info.guidelines' }, >>>>>>>> } >>>>>>>> >>>>>>>> To add my About menu and the dropdown options (this may not be >>>>>>>> needed for 7.6 as I think there have been some additional themable >>>>>>>> components added related to the nav bar; I did this in 7.4 initially) I >>>>>>>> added this section to /src/app/menu.resolver.ts at about line 96 >>>>>>>> (i.e I inserted these as the very first entries in the menuList >>>>>>>> array in createPublicMenu, right before the existing Communities >>>>>>>> and Collections element) >>>>>>>> >>>>>>>> /* About */ >>>>>>>> { >>>>>>>> id: `about_about`, >>>>>>>> parentID: 'about', >>>>>>>> active: false, >>>>>>>> visible: true, >>>>>>>> model: { >>>>>>>> type: MenuItemType.LINK, >>>>>>>> text: `info.about.title`, >>>>>>>> link: `/info/about` >>>>>>>> } as LinkMenuItemModel >>>>>>>> }, >>>>>>>> { >>>>>>>> id: `about_guidelines`, >>>>>>>> parentID: 'about', >>>>>>>> active: false, >>>>>>>> visible: true, >>>>>>>> model: { >>>>>>>> type: MenuItemType.LINK, >>>>>>>> text: `info.guidelines.title`, >>>>>>>> link: `/info/guidelines` >>>>>>>> } as LinkMenuItemModel >>>>>>>> }, >>>>>>>> { >>>>>>>> id: 'about', >>>>>>>> active: false, >>>>>>>> visible: true, >>>>>>>> index: 0, >>>>>>>> model: { >>>>>>>> type: MenuItemType.TEXT, >>>>>>>> text: 'menu.section.about' >>>>>>>> } as TextMenuItemModel, >>>>>>>> }, >>>>>>>> >>>>>>>> >>>>>>>> I don't like having to modify code outside of the theme, but I was >>>>>>>> in a bit of a rush to get this working. I think 7.6 made some >>>>>>>> additional >>>>>>>> nav related stuff themable so I might be able to undo that last >>>>>>>> modification. I haven't actually investigated that yet. >>>>>>>> >>>>>>>> - Darryl >>>>>>>> >>>>>>>> >>>>>>>> On Monday, October 2, 2023 at 9:51:09 AM UTC-6 Carolyn Sullivan >>>>>>>> wrote: >>>>>>>> >>>>>>>>> Oh wait, I see Mark has helpfully shared his code in the DSpace >>>>>>>>> Slack: >>>>>>>>> https://dspace-org.slack.com/archives/C3TTSEB1V/p1694715563285319 >>>>>>>>> >>>>>>>>> The changes aren't working in my repo so far, but this gives me a >>>>>>>>> good starting point--thanks Mark! >>>>>>>>> >>>>>>>>> On Monday, October 2, 2023 at 9:43:43 AM UTC-4 Carolyn Sullivan >>>>>>>>> wrote: >>>>>>>>> >>>>>>>>>> Hello, >>>>>>>>>> >>>>>>>>>> Thank you for opening this thread. I have the same problem as >>>>>>>>>> Mariusz originally did, and was wondering if anyone could offer some >>>>>>>>>> more >>>>>>>>>> specific recommendations regarding Mark Wood's solution. >>>>>>>>>> >>>>>>>>>> On our repository, we added an additional link to the navbar menu >>>>>>>>>> like so: >>>>>>>>>> >>>>>>>>>> <li ngbDropdown class="nav-item d-flex align-items-center"> >>>>>>>>>> <a class="nav-link " role="button" data-toggle="dropdown" >>>>>>>>>> aria-expanded="false" ngbDropdownToggle> About </a> >>>>>>>>>> <div ngbDropdownMenu class="m-0 border-top-0 ng-trigger >>>>>>>>>> ng-trigger-slide shadow-none" id="customDrop"> >>>>>>>>>> <a ngbDropdownItem style="color: #207698" >>>>>>>>>> href="assets/about/uo-research.html">UO-Research</a> >>>>>>>>>> <a ngbDropdownItem style="color: #207698" >>>>>>>>>> href="assets/about/policies.html">Policies</a> >>>>>>>>>> <a ngbDropdownItem style="color: #207698" >>>>>>>>>> href="assets/about/faq.html">FAQ</a> >>>>>>>>>> </div> >>>>>>>>>> </li> >>>>>>>>>> >>>>>>>>>> To use this structure but have it link to a view with the DSpace >>>>>>>>>> header/footer and text content sandwiched between, would we then >>>>>>>>>> create a >>>>>>>>>> component in our custom/app folder, and then use a routing >>>>>>>>>> module/routerlink to get to that component view instead of using the >>>>>>>>>> static >>>>>>>>>> link here (https://angular.io/tutorial/tour-of-heroes/toh-pt5)? >>>>>>>>>> Is that the simplest way of doing it? >>>>>>>>>> >>>>>>>>>> Thanks, >>>>>>>>>> Carolyn. >>>>>>>>>> >>>>>>>>>> >>>>>>>>>> On Friday, June 10, 2022 at 8:39:52 AM UTC-4 Mariusz wrote: >>>>>>>>>> >>>>>>>>>>> It enlightened me and I have done it in the meantime. I just >>>>>>>>>>> doubled the privacy component accordingly. Managed to. It works. >>>>>>>>>>> But thanks >>>>>>>>>>> for any suggestions. >>>>>>>>>>> >>>>>>>>>>> Regards >>>>>>>>>>> Mariusz >>>>>>>>>>> >>>>>>>>>>> piątek, 10 czerwca 2022 o 14:25:27 UTC+2 [email protected] >>>>>>>>>>> napisał(a): >>>>>>>>>>> >>>>>>>>>>>> On Fri, Jun 10, 2022 at 02:35:00AM -0700, Mariusz wrote: >>>>>>>>>>>> > It works, but how can I make static pages look like the rest. >>>>>>>>>>>> I would like >>>>>>>>>>>> > a page with static content that looks like other pages in my >>>>>>>>>>>> repository. I >>>>>>>>>>>> > have already created my own theme. I would like to have >>>>>>>>>>>> additional (themed) >>>>>>>>>>>> > pages with my permanent content, as now they have >>>>>>>>>>>> info/privacy (Privacy >>>>>>>>>>>> > Statement) or info/end-user-agreement (End User Agreement) . >>>>>>>>>>>> Pages with my >>>>>>>>>>>> > own info. I don't know if I'm explaining well. ;) >>>>>>>>>>>> >>>>>>>>>>>> So, I think you are saying that you want a page with all of the >>>>>>>>>>>> common >>>>>>>>>>>> DSpace decorations, behaviors and styling, but with static >>>>>>>>>>>> content in >>>>>>>>>>>> the middle. That does not sound like a static page, but a >>>>>>>>>>>> dynamic >>>>>>>>>>>> page with fixed main content. I think that, to do this, you >>>>>>>>>>>> would >>>>>>>>>>>> just write a component whose HTML template file contains no >>>>>>>>>>>> placeholders and whose Typescript file contains no behaviors. >>>>>>>>>>>> Use the >>>>>>>>>>>> theme's styling classes so that the rendering of your component >>>>>>>>>>>> tracks >>>>>>>>>>>> changes to the theme. >>>>>>>>>>>> >>>>>>>>>>>> The "page" is assembled by Angular in the browser, and the >>>>>>>>>>>> stuff in >>>>>>>>>>>> the middle that changes as you navigate is just one part of the >>>>>>>>>>>> assembly. https://en.wikipedia.org/wiki/Single-page_application >>>>>>>>>>>> >>>>>>>>>>>> -- >>>>>>>>>>>> Mark H. Wood >>>>>>>>>>>> Lead Technology Analyst >>>>>>>>>>>> >>>>>>>>>>>> University Library >>>>>>>>>>>> Indiana University - Purdue University Indianapolis >>>>>>>>>>>> 755 W. Michigan Street >>>>>>>>>>>> Indianapolis, IN 46202 >>>>>>>>>>>> 317-274-0749 <(317)%20274-0749> >>>>>>>>>>>> www.ulib.iupui.edu >>>>>>>>>>>> >>>>>>>>>>> -- > All messages to this mailing list should adhere to the Code of Conduct: > https://www.lyrasis.org/about/Pages/Code-of-Conduct.aspx > --- > You received this message because you are subscribed to the Google Groups > "DSpace Community" group. > To unsubscribe from this group and stop receiving emails from it, send an > email to [email protected]. > To view this discussion on the web visit > https://groups.google.com/d/msgid/dspace-community/7211f3e2-1e88-49a5-933d-baa96d8ada84n%40googlegroups.com > <https://groups.google.com/d/msgid/dspace-community/7211f3e2-1e88-49a5-933d-baa96d8ada84n%40googlegroups.com?utm_medium=email&utm_source=footer> > . > -- All messages to this mailing list should adhere to the Code of Conduct: https://www.lyrasis.org/about/Pages/Code-of-Conduct.aspx --- You received this message because you are subscribed to the Google Groups "DSpace Community" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To view this discussion on the web visit https://groups.google.com/d/msgid/dspace-community/CA%2BpcS1RmuLF-T%2Bc%2BRKK2O2%3DEApCnaJnGi9touTzEcoJ_J6ehyg%40mail.gmail.com.
