Project

General

Profile

Feature #5658

Responsive design enhancements

Added by Yannick Warnier over 6 years ago. Updated almost 6 years ago.

Status:
New
Priority:
Normal
Assignee:
-
Category:
Styles, Layout & Accessibility
Target version:
Start date:
17/10/2012
Due date:
% Done:

50%

Estimated time:
Spent time:
Complexity:
Normal
SCRUM pts - complexity:
?

Description

Working on improving the responsive design's look, currently looking a bit weird on smartphones.


Files

with_no_fix.png (17 KB) with_no_fix.png Julio Montoya, 04/12/2012 11:09

Related issues

Related to Chamilo LMS - Bug #4038: Chamilo 1.9 - Error de acceso a items de barra de herramientas superiorRejected - Abandoned11/11/2011

Actions
Related to Chamilo LMS - Bug #5733: ICONS not showing correct in Internet Explorer (quick toolbar)Bug resolved15/11/2012

Actions
Related to Chamilo LMS - Bug #5735: Problema de visualizaciĆ³n en ExplorerBug resolved16/11/2012

Actions

Associated revisions

Revision 43debfcf (diff)
Added by Yannick Warnier over 6 years ago

Mobile: many fixes to size changes - must still be tested in IE - refs #5658

Revision 7cfeb1ca (diff)
Added by Yannick Warnier over 6 years ago

Mobile: minor changes to responsive design alignment - refs #5658

Revision 42302fc6 (diff)
Added by Yannick Warnier over 6 years ago

Fix problems in responsive design - refs #5658

Revision 14604fd1 (diff)
Added by Yannick Warnier over 6 years ago

Improve responsive design - refs #5658

Revision 556430b1 (diff)
Added by Yannick Warnier over 6 years ago

Improve responsive design for 720px width - refs #5658

Revision 778eba49 (diff)
Added by Julio Montoya over 6 years ago

Removing custom styles let bootstrap do that job see #5658

History

#1

Updated by Yannick Warnier over 6 years ago

  • % Done changed from 0 to 50
#2

Updated by Julio Montoya over 6 years ago

Some pages have some weird div disposition: course home page, document edition inside a LP, index of portal admin, etc

#3

Updated by Yannick Warnier over 6 years ago

In any case, changing the ID of one of the two main_content was necessary (as to HTML standard, an ID must be unique in any same HTML document). It seems strange to me to have so much impact on blocks, but then again, I made a lot of changes. I see there are many elements missing to clearly differentiate between span6 in the courses list and span6 in the social network, for example. The terminology of the different sections has to be improved (otherwise I am forced to put like 8 pre-selectors to get to the right elements, and even then it's not sufficient to single them out).

Thanks for reporting, I will review all these. It would help me if you could put some more syntactically correct tags in the content. Like call the courses lists "#courses-list" or something like that (instead or additionally to "main_content").

#4

Updated by Julio Montoya over 6 years ago

more pages affected: after creating a course main/create_course/add_course.php, course catalog main/auth/courses.php, etc

#5

Updated by Julio Montoya over 6 years ago

#top_main_content .span3 {
  float: right;
}
#top_main_content .span9 {
  float: left;
}
#top_main_content .span6 {
  width: 460px;
}

I found this will doing a merge with 1.10 you shouldn't change the width of the "span6" those are managed by bootstrap
Also those float: right; and left will effect every page that manage the 2 col layout

#6

Updated by Yannick Warnier over 6 years ago

Let's say this is my way of protesting against the fact that there is not clear semantic for the different element blocks, so it's a work in progress. I should be able to fix that over the week-end, but the intention is clearly to make sure that I can re-define thos span6 (or whatever other semantic I will give them) depending on which page thy appear on.
This already works (somehow) for specific (large) blocks of data, so it's just a matter of adjusting the semantic in order to make it more controlable (adding classes, basically).

#7

Updated by Julio Montoya over 6 years ago

I don't recomend that you change the .spanX with customs widths because that's the beauty of the CSS grid style.
I agree that names/tagging are not final it will make me happy if you improve it :)

#8

Updated by Yannick Warnier over 6 years ago

Shared feeling :-)
This being said, for responsive design, it does make sense to reduce the size of all blocks of a specific type a little, or the properties in general, but I admit that I went a bit overboard.

#9

Updated by Julio Montoya over 6 years ago

  • Status changed from Assigned to Needs more info

I think you should moved this task to 1.10, because there it will be some improvements in the Twig implementation and in the tpls new "style bugs" are starting to appear ... see #4038

#10

Updated by Yannick Warnier over 6 years ago

I think I've fixed all the responsive design problems I had created (I reverted most of the responsive.css changes and re-applid som of them with better precision in the selectors).
I see that the list of courses is still not ideal in 320 o 480px width displays (they appear after the long menu). I think in that case the user picture and social block should just disappear and we should only show a short action menu (course catalog and stuff), then the courses.

#11

Updated by Julio Montoya over 6 years ago

I sent this fix that resolves this issue:

https://code.google.com/p/chamilo/source/detail?r=f11ad9eccdbbd27e397327ea480689d80f6c9201&name=1.9.x&repo=classic

I also want to remove this style that makes many columns (in LP edit mode, in the social tool) look weird.

#top_main_content .span6 {
  width: 460px;
}
#12

Updated by Yannick Warnier about 6 years ago

  • Target version changed from 1.9.4 to 1.9.6
#13

Updated by Yannick Warnier almost 6 years ago

  • Status changed from Needs more info to New
  • Assignee deleted (Yannick Warnier)
  • Target version changed from 1.9.6 to 2.0

Also available in: Atom PDF