Allow wrap-around text for content items in a module

[amixon]

  This idea has been developed and deployed to Canvas

  Idea will be open for vote Wed. July 1, 2015 - Wed. October 7, 2015  Learn more about voting...

Dear Canvas

Recently you updated the number of characters visible in the module main page.  Now all of my assignments are truncated and end with ....

Why would you do this?

Does this look informative to students?  Why is there so much white open and available space between my assignment name and the number of points it's worth?

http://puu.sh/ipNcq.png

Now, I heard it was to make things easier to read on phones and tablets.  Except it's not. Here's my tablet.  This is awesome.  Totally - I like being able to see 10 letters of an assignment.  And since you can't hover on a tablet, why have you done this?

I would like to know who, in their right mind, looked at this and said, yeah.... that looks great!

http://puu.sh/ipNmy.png

I would like to vote on increasing the display size of assignment names in the modules.  Whatever it was before was even too small.  So I don't know if this is a vote on increasing the allowable text letters, or if it increases the width of the pixels used in that category.  No, I don't use the app for Canvas because I don't like how it's set up or organized.  It looks entirely different than the web based version, nothing is indented and so on, so that's not a reasonable alternative request Canvas.

Thanks

April

  Comments from Instructure

For more information, please read through the Canvas Production Release Notes (2016-08-27)

[sherie_crosby]

I am still waiting to see if this change will come to pass. What is the progress here? My text title/headers in Modules are still truncated. This is not just a case of making the title more concise. The name of the presentation uses several words with lots of characters. I have tried to shorten it with "&" for "and", as well as dropping "The". However, it comes to the point where the essential meaning is lost e.g. "Pt essential meaning lost". Please allow for more characters.

[GideonWilliams]

whilst we encourage our staff to keep title brief and meaningful it is important that their sense is not lost with the ... Especially when we are dealing with younger children.

has my vote all day long...

[don_bryn]

Even with "mobile first", I think we could do much better at using space in Canvas.   Saying that we are truncating the titles because of the mobile app doesn't make sense if you're using percentage widths in CSS.   A percentage is a percentage is a percentage.   It will show 34% on a desktop screen and 34% on a tablet screen.  That's why CSS percentages are so important in maintaining readability across devices in web design.

If you look at the overall layout of any part of a course, the actual content of the course is squeezed into about 1/3 of the page because of the left nav and the right nav.  But in between all that there is a lot of white space.   Seriously, look at any course you are teaching, lean back and just take in the whole page.  See how much white space there is. . .and how small your course content is.

The course content should be the MAIN part of the screen, with nav bars being kept to the minimum space necessary.   I've been annoyed with this waste of space since we switched to Canvas.   I would love to see this idea put into practice!!    And even further improvements in the layout to minimize wasted space.

[GideonWilliams]

Absolutely agree with you. Being able to temporary increase the page space by closing the three horizontal bars is a start but would LOVE to see the same with the right hand announcements. There is a HUGE lot of space taken up for content that could appear elsewhere:

[don_bryn]

About Space:

OK, so I wasted a couple hours on a Saturday Morning, AND I only did CSS rewrites for one screen size, but look how much space I saved without sacrificing any readability or functionality.  You'll also notice I used images for the icons because it was faster to do the mockup, so they look a little different than the font Canvas uses.

Doesn't it look like the COURSE is the most important thing?   Woohoo.

OLD

NEW

[GideonWilliams]

Wow this is brilliant don. Looks superb and focus is right on the content. Can you apply this CSS globally? Would you be able to share? Great work. Just shows how much uneccessary           there is.

[don_bryn]

Thanks.   This work would have to be done by the Canvas designers.   It takes too long to reverse engineer what they've done, and they should know how any changes will flow throughout the whole Canvas system.   IE, if I change this CSS rule, what else will it affect. 

It took me a couple hours to sort-of reverse engineer this page, but the redesign only took about 1/2 hour.  There's a LOT of padding and margins around everything. . . just wasted space.   I just thought that showing what's possible might be more inspiring for change than just complaining about what I don't like.

**UPDATE**

Actually, I'm not an admin, so I don't know if you could do this globally.   If anyone out there knows, please tell us is admins can change this globally for an institution.

[don_bryn]

Besides changing the icons to images, this is all I changed.  To make this more permanent you would have to look at any changes inside each @media declaration and then make similar changes for any other @media declarations.   Those are the declarations that make changes based on the screen size, device, etc. . .

.ic-app-header {

    width: 60px;

}

.ic-app-header__primary {

    width: 60px

}

#wrapper-container {

    margin-left: 62px

}

.ic-app-nav-toggle-and-crumbs {

    margin: 0 2px;

    padding: 16px 0

}

.ic-app-course-menu {

    width: 140px;

    padding: 2px;

    opacity: 0

}

body.course-menu-expanded:not(.ic-no-flex-layout):not(.embedded) .ic-app-main-layout-horizontal {

    margin-left: 140px

}

body.course-menu-expanded:not(.ic-no-flex-layout):not(.embedded) .ic-app-main-layout-horizontal:before {

    left: -140px

}

#content {

    padding: 24px 2px 24px 2px;

}

.item-group-container .item-group-condensed {

    border-bottom: 1px dashed #b3b3b3;

    padding: 14px

}

.context_module .header {

    padding: 6px 4px;

}

.module_item_icons {

  display: none;

    width:auto !important;

}

@media only screen and (min-width: 992px) {

    .ig-title {

        -webkit-flex: 0 0 70%;

        -ms-flex: 0 0 70%;

        flex: 0 0 70%

    }

}

@media only screen and (min-width: 768px) {

    .col-md, .col-md-1, .off-md-1, .col-md-2, .off-md-2, .col-md-3, .off-md-3, .col-md-4, .off-md-4, .col-md-5, .off-md-5, .col-md-6, .off-md-6, .col-md-7, .off-md-7, .col-md-8, .off-md-8, .col-md-9, .off-md-9, .col-md-10, .off-md-10, .col-md-11, .off-md-11, .col-md-12, .off-md-12 {

        padding-right: 8px;

        padding-left: 8px

    }

form {

    margin: 0 0 10px

}

@media only screen and (min-width: 1140px) {

    body.course-menu-expanded .ic-app-main-content__secondary {

        -webkit-flex: 0 0 240px;

        -ms-flex: 0 0 240px;

        flex: 0 0 240px;

        padding-left: 12px;

       padding-right:12px;

    }

}

.btn,

.Button,

.ui-button {

    padding: 8px 10px;

}

[don_bryn]

Is that an English Cocker in your profile pic?   Looks just like my dog, Patches, that got me hooked on cockers  (sorry, he died a year ago, but I have a standard american cocker now).

[GideonWilliams]

Hey Don it is. Alfie. Think he may be a field spaniel. He is the love of my life (after Louise and Jamie). Spaniels are awesome dogs.