Giter VIP home page Giter VIP logo

cozy's Introduction

Cozy

This is an Omeka S theme featuring an off-canvas navigation menu.

Installation

For basic out-of-the-box use of the theme, follow the Omeka S User Manual instructions for installing themes.

For more advanced use, such as customizing the theme with Sass, you'll need to install the tools with NodeJS (0.12 or greater). Navigate to your theme directory and run npm install.

Customizing the Theme

For those dipping their toes into customizing sites with CSS, the CSS Editor module allows site administrators to write style overrides.

For advanced CSS and Sass users, Cozy provides variables for easily customizing typography, spacing, and colors in asset/sass/_base.scss.

Sass Tasks

Run these commands within the theme's root directory.

  • npm start: While this task runs, it watches for changes to sass files and recompiles the CSS.
  • gulp css: This is the one-off task for compiling the current Sass/CSS.
    • gulp css:watch: This task watches for changes in the Sass, then compiles the CSS.

Theme Configuration

  • Logo: Upload an image asset to use as a logo in place of a text site title.
  • Banner: Upload an image asset to use a banner that sits above the main content area of every view.
  • Banner width: Select whether the banner image fits within the margins of the main content area or to have it bleed outside the margins to the container's edges.
  • Banner height: The maximum banner image height in pixels.
  • Banner height for mobile devices: The maximum banner image height in pixels at narrower viewport widths.
  • Banner position: Where to anchor the banner image within its container: centered, stuck to the top, or stuck to the bottom.
  • Main accent color: An accent color to be used on button and link highlights. The default value is #089494.
  • Navigation background color: An color to be used in the off-canvas navigation background. The default value is #bfdcdc.
  • Top navigation depth: If the main navigation is set to display child pages, this setting controls how many navigation levels to display. Setting this to '0' shows all levels.
  • Truncate Body Property: Controls the size of the body property of resources in a browseable list. It can be set to show the full value, truncate after 4 lines and fade out, or truncate after 4 lines and clip with an ellipsis.
  • Footer content: Control what appears in the footer. This field takes HTML markup.

Resource Page Configuration

Omeka S 4.0 introduced configurable resource pages. Cozy supports block configuration for items, item sets, and media show pages. Each of those views contains 3 configurable regions:

  • Full-width main: This is intended to be a primary content area that spans the full width of a page.
  • Main with sidebar: This is a version of the primary content area that expects to sit alongside a single right sidebar.
  • Right sidebar: This is a sidebar that sits to the right of "main with sidebar".

Copyright

Cozy is Copyright © 2016-present Corporation for Digital Scholarship, Vienna, Virginia, USA http://digitalscholar.org

The Corporation for Digital Scholarship distributes the Omeka source code under the GNU General Public License, version 3 (GPLv3). The full text of this license is given in the license file.

The Omeka name is a registered trademark of the Corporation for Digital Scholarship.

Third-party copyright in this distribution is noted where applicable.

All rights not expressly granted are reserved.

Copyright

Cozy is Copyright © 2016-present Corporation for Digital Scholarship, Vienna, Virginia, USA http://digitalscholar.org

The Corporation for Digital Scholarship distributes the Omeka source code under the GNU General Public License, version 3 (GPLv3). The full text of this license is given in the license file.

The Omeka name is a registered trademark of the Corporation for Digital Scholarship.

Third-party copyright in this distribution is noted where applicable.

All rights not expressly granted are reserved.

cozy's People

Contributors

dependabot[bot] avatar jimsafley avatar kimisgold avatar patrickmj avatar sharonmleon avatar zerocrates avatar

Stargazers

 avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar

cozy's Issues

Test new core page block styles

See omeka/omeka-s#1480. Cozy currently solely uses the core's styles for pages, and we're looking for Cozy to not look radically different with this reorganization of styles.

Test with Omeka S on block-styles branch and cozy's master branch.

Media list thumbnails getting squished

Same as in Foundation, the media list doesn't play well with with long media titles. Probably just want overflow:hidden on the titles:

cozy-thumbnail2

Also, when it's full-width, the media list entries could probably use some vertical padding. This long-title one is creating space around it but the others are running up against each other:

cozy-thumbnail

Items with maps very cozy

I'm not sure if this is an issue, but wanted to make sure the map block is supposed to display this way on an item page:

screen shot 2016-10-24 at 3 18 19 pm

screen shot 2016-10-24 at 3 18 32 pm

.Item-resource margin-right

.item-resource has a margin-right that I'm not sure it needs? It shows up whether the block is floated left or right. They already get margins at the block level.

Screenshot 2024-03-05 at 10 41 43 Screenshot 2024-03-05 at 10 47 10 Screenshot 2024-03-05 at 10 43 35 Screenshot 2024-03-05 at 10 43 44

Test new banner setting

There is now a theme setting that allows users to select a banner image to appear across site views. In additional settings, they can control:

  • the maximum height of the banner for both mobile and desktop widths
  • whether to match the width to the content or window
  • where to position the image within the banner container when the container ratio has a much greater width than height

This is on the master branch and should be tested on desktop and mobile browsers.

Prev/Next nav needs some padding below Map block on pages

When Map is last block on the page, the nav elements are flush with the bottom of the map. Could use a little padding on the top of the prev/next buttons.
nav-map-cozy

NB: This is a cropped image. The map displays properly as a block on a page.

Embedded media overlaps headings/content

Seems to just be a case of the media div not clearing the floated headings. Adding clearing to either .media-embeds or (probably better) .media-render should fix it, it looks like.

Test configurable page blocks

This is the theme-specific issue for omeka/omeka-s#1859. Please test this using the latest version of Omeka S on the develop branch.

Cozy now supports configurable resource page blocks. On a site's theme settings panel, select Cozy's "Configure resource pages" button. Test that blocks can be reordered, removed, and readded on the show views of items, media, and item sets.

Cozy has a three block regions, all of which can coexist with each other.

  • Main (full-width): This sits above all other regions and takes up the full content width of the page.
  • Main (with sidebar): This sits below the full-width main region and inline with the right sidebar region. If it is the only populated region, it only takes up partial content width.
  • Right sidebar: This sits to the right inline with the main with sidebar region.

Full-width region not showing blocks

I don't have time to test this really thoroughly, but when I dropped a Mapping block into the item sets page full-width region, it didn't display.

Screenshot 2024-05-14 at 12 50 00 Screenshot 2024-05-14 at 12 50 07

Moving it to the main-with-sidebar worked fine.

Screenshot 2024-05-14 at 12 50 26 Screenshot 2024-05-14 at 12 50 30

You'll want to test other kinds of blocks in all the regions and not just on item sets.

Initial testing

Use cases we're testing for:

Browsers

  • Chrome
  • Firefox
  • IE 11

Modules

  • Mapping
  • Collecting
  • MetadataBrowse

Other

  • Mobile devices
  • Multiple levels of navigation
  • Logo upload
  • Custom colors

Please make separate issues for any found bugs or unexpected behaviors.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.