cccs-web / core

CCCS' customized django web application
4 stars 11 forks source link

improving front-end print-out of CV data #128

Closed cccs-ip closed 9 years ago

cccs-ip commented 9 years ago

I'd like to re-work the print-out of our consultant CV information somewhat. E.g. https://crossculturalconsult.com/cvs/cv/detail/aaron-dennis/

Below is some modified HTML produced by @marcusbjoerkqvist and myself. There are some aspects of the linkages to the database that we don't know how to deal with; we flagged these with the word GUESS. There's also a duplicated 'Employment' section, where I tried to model the output I would like using HTML, since I couldn't get it working for the Bootstrap table classes. Turns out I am also having issues with the HTML (enforcing proportions).

Because this is mostly indicative, I didn't try to make changes to the CV template html.

Please help us to revise the CV pages accordingly.

{% extends 'base.html' %}
{% block main %}
    <h1>CV for {{ object.user.first_name }} {{ object.user.last_name }}</h1>
    <p>More work to do here by editing cvs/templates/cvs/cv_detail.html...</p>
    {% if can_update %}
        <a href="{% url "cv-update" slug=object.slug %}" class="btn btn-sm btn-default">
            <span class="glyphicon glyphicon-edit"></span>Edit
        </a>
    {% endif %}

    <h2>Biographical Profile</h2>
        <div class="row">
          <div class="col-lg-12">
            <div class="well">
              Please help to link in the biographical summary for each consultant.
            </div>
          </div>
       </div>

    <h2>Areas of Specialization</h2>
    <table class="table table-striped table-bordered table-hover table-condensed">
        {% GUESS for cvthemes in object.cvthemes_set.all %}
         <tr>
            <th>Thematic Issues</th>
            <td>{{ GUESS cvthemes.cccs_themes + GUESS cvthemes.cccs_subthemes; <b>possible to concatenate output like list of keywords?</b> }}</td>
        </tr>
        {% endfor %}
        {% GUESS for cvthemes in object.cvthemes_set.all %}
    <tr>
            <th>Sectors</th>
            <td>{{ GUESS cvthemes.cccs_sectors + GUESS cvthemes.cccs_subsectors; <b>possible to concatenate output like list of keywords?</b> }}</td>
        </tr>
        {% endfor %}
        {% GUESS for cvcountries in object.cvcountries_set.all %}
    <tr>
            <th>Countries</th>
            <td>{{ GUESS cvcountries.set.all; <b>possible to concatenate output like list of keywords?</b> }}</td>
        </tr>
        {% endfor %}
    </table>
    <p>&nbsp;</p>

    <h2>Educational Background</h2>

    <span style = "font-size: x small"><p>&nbsp;</p></span>
    <h4><b>Academic Degrees</b></h4>
    <table class="table table-striped table-bordered table-hover table-condensed">
        <thead>
        <tr>
            <td>Institution</td>
            <td>Subject</td>
            <td>Qualification</td>
            <td>From</td>
            <td>To</td>
        </tr>
        </thead>
        <tbody>
        {% for cveducation in object.cveducation_set.all %}
            <tr>
                <td>{{ cveducation.institution }}</td>
                <td>{{ cveducation.subject }}</td>
                <td>{{ cveducation.qualification }}</td>
                <td>{{ cveducation.from_date }}</td>
                <td>{{ cveducation.to_date }}</td>
            </tr>
        {% endfor %}
        </tbody>
    </table>

    <h4><b>Specialised Training</b></h4>
    <table class="table table-striped table-bordered table-hover table-condensed">
        <thead>
        <tr>
            <td>Institution</td>
            <td>Subject</td>
            <td>From</td>
            <td>To</td>
        </tr>
        </thead>
        <tbody>
        {% for cvtraining in object.cvtraining_set.all %}
            <tr>
                <td>{{ cvtraining.institution }}</td>
                <td>{{ cvtraining.subject }}</td>
                <td>{{ cvtraining.from_date }}</td>
                <td>{{ cvtraining.to_date }}</td>
            </tr>
        {% endfor %}
        </tbody>
    </table>

    <h4><b>Membership in Professional Societies</b></h4>
    <table class="table table-striped table-bordered table-hover table-condensed">
        <thead>
        <tr>
            <td>Organisation</td>
            <td>Role</td>
            <td>From</td>
            <td>To</td>
        </tr>
        </thead>
        <tbody>
        {% for cvmembership in object.cvmembership_set.all %}
            <tr>
                <td>{{ cvmembership.organization }}</td>
                <td>{{ cvmembership.role }}</td>
                <td>{{ cvmembership.from_date }}</td>
                <td>{{ cvmembership.to_date }}</td>
            </tr>
        {% endfor %}
        </tbody>
    </table>
    <p>&nbsp;</p>

    <h2>Project Experience</h2>
    <table class="table table-striped table-bordered table-hover table-condensed">
        <thead>
        <tr>
            <td>Project</td>
            <td>Position</td>
            <td>Months Worked</td>
            <td>Activities</td>
            <td>References</td>
        </tr>
        </thead>
        <tbody>
        {% for cvproject in object.cvproject_set.all %}
            <tr>
                <td>
                    <a href="{% url 'project-detail' slug=cvproject.project.slug %}">
                        {{ cvproject.project.name }}
                    </a>
                </td>
                <td>{{ cvproject.position }}</td>
                <td>{{ cvproject.person_months }}</td>
                <td>{{ cvproject.activities }}</td>
                <td>{{ cvproject.references }}</td>
            </tr>
        {% endfor %}
        </tbody>
    </table>
    <p>&nbsp;</p>

<!--I COULDN'T GET THE TABLE FORMATTING RIGHT WITH BOOTSTRAP, SO THIS I TRIED USING AN HTML EXAMPLE.  THIS STILL ISN'T WORKING CORRECTLY... -->
    <h2>Employment Experience - (HTML generated example)</h2>

<style type="text/css">
.tg  {border-collapse:collapse;border-spacing:0;}
.tg td{border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
.tg th{border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
</style>
<table class="tg">
  <tr>
    <th class="tg-031e" colspan="12">Employer</th>
  </tr>
  <tr>
    <td class="tg-031e" colspan="12">{{ GUESS cvemployment.institution}}</td>
  </tr>
  <tr>
    <td class="tg-031e" colspan="3">Dates Employed</td>
    <td class="tg-031e" colspan="9">Position</td>
  </tr>
  <tr>
    <td class="tg-031e" colspan="3">e.g. 2010 - 2013</td>
    <td class="tg-031e" colspan="9">{{ GUESS cvemployment.position}}</td>
  </tr>
</table>
<!--MATERIALS ABOVE ARE FOR ILLUSTRATION ONLY-->

    <h2>Employment Experiencev (BootStrap Formatting Needs Work)</h2>
   <table class="table table-striped table-bordered table-hover table-condensed">
    {% GUESS for cvemployment in object.cvemployment_set.all %}
    <tr>
          <div class="col-lg-12">
            <th>Employer</th>
            <td>{{ GUESS cvemployment.institution}}</td>
      </div>
         </tr>
         <tr>   
          <div class="col-lg-4">
            <th>Dates Employed</th>
            <td>{{ GUESS cvemployment.date_start + GUESS cvemployment.date_end; <b>possible to concatenate output like `date_start` and `data_end`, and also to limit output to years only??</b> }}</td>
      </div>
        </tr>
        <tr>
          <div class="col-lg-8">
            <th>Position</th>
            <td>{{ GUESS cvemployment.position}}</td>
      </div>
        </tr>
        {% endfor %}
    </table>
    <p>&nbsp;</p>

    <h2>Languages</h2>
    <table class="table table-striped table-bordered table-hover table-condensed">
        <thead>
        <tr>
            <td>Language</td>
            <td>Reading</td>
            <td>Writing</td>
            <td>Speaking</td>
        </tr>
        </thead>
        <tbody>
        {% for cvlanguage in object.cvlanguage_set.all %}
            <tr>
                <td>{{ cvlanguage.language }}</td>
                <td>{{ cvlanguage.reading }}</td>
                <td>{{ cvlanguage.writing }}</td>
                <td>{{ cvlanguage.speaking }}</td>
            </tr>
        {% endfor %}
        </tbody>
    </table>

{% endblock main %}
pwhipp commented 9 years ago

Will do but the right approach here is to simply create a branch in github, attempt your change and if it fails, push the branch so we can share it and run the same (initially non-working) code locally.

If you are guessing at model fields, go to the relevant model in https://github.com/cccs-web/core/blob/master/cvs/models.py

I'll sort out the branch when I start work on this issue.

cccs-ip commented 9 years ago

Thanks for clarifying the process. As noted, my reluctance to even try derived from the fact that I knew I had no idea what the code was to link to the database. We should schedule that tutorial sometime soon... before I run off again.

pwhipp commented 9 years ago

Your guesses are pretty close ;)

If you like, I'll ping you when I get onto this issue (tomorrow probably).

cccs-ip commented 9 years ago

Sounds good (assuming I'm awake when you're working on it!)

cccs-ip commented 9 years ago

By the way, with regard to that 'employment' section - I am not sure we can reiterate entries in the format I defined. That is - is it possible to tell the system to re-iterate a full HTML structure per entry in order to allow a format that looks roughly as follows:

Employment History:

Cross-Cultural Consulting Services 2005–2011 : Director, Business Development and Research

Similarly, is it possible to 'hide' sections where no data is given? For example, if a consultant does not have any data for 'Membership in Professional Societies', can we make is so that header doesn't show on their CV output page until some data is there?

pwhipp commented 9 years ago

Yes, and yes.

pwhipp commented 9 years ago

I've created a cv_presentation branch which I'll serve on staging so you can see the template as it develops there.

Under the areas of specialization, are you looking for all of the items relating to all of the projects that the person has been involved in?

So for example the cccs themes will be each distinct theme for which there is at least one matching project associated with the cv.

I'm going to get the template working so we can present it and iterate towards an acceptable presentation.

cccs-ip commented 9 years ago

Background to the problem

Your configuration of the database highlighted a challenge with regard to our assignment of 'themes' and 'sub-themes'. Generally speaking, a project will be assigned only a sector designation, like "mining"... although Banks sometimes have special initiatives for educational reform, etc, as the topic (theme) of a project intervention.

When a consultant works on a project, by contrast, she or he will usually contribute to specific thematic issues. CCCS, for example, tends to work on Indigenous Peoples issue with relation to project... be they mining projects, forestry projects, or whatever.

Potential solutions (as background to this particular issue)

One option we might explore is to allow consultants to work with "project information" from their CV entry form. For example, they could chose a project, like WBN, and then add thematic issues that relate to their own experience. Greg and I add Indigenous Peoples, you add information techologies, and another guy adds health. These individual themes and values are unique to a CV (that is, not everyone's CV has to show all... and ideally it wouldn't in order to avoid confusion), and the project sheet "compiles" these entries. This would allow consultants to assign thematic values to projects without having to go into the project page, and any administrator looking at a project page that seems some weird thematic or sector entry could just delete (and thus delete it also from the consultants' CVs as an result), or otherwise drill into the consultants' CVs to investigate the abnormality.

Answer to your question

For the CVs, we'd want to use only the CCCS themes and sectors. For the moment, just listing 'themes' and 'sectors' is enough... we don't need 'subthemes' or 'subsectors'. This would be for all projects that all consultants have worked on. We also don't need to worry about IFC "subthemes" or IFC sectors, as these will largely be subsumed within the CCCS values (which were formulated to be a comprehensive amalgam of IFC + others). [ We might, however, want to add in a list of IFC Performance Standards for each consultants (currently IFC theme), so that it would show, for instance, that I have experience in PS1, PS7 and PS8... but we can deal with that later.]

pwhipp commented 9 years ago

Done and deployed. Review with https://crossculturalconsult.com/cvs/list/

I used a collapsing panel for the projects because the table looked scrappy (highly variable content never works too well in a table).

I've assumed everyone has at least one project. It should not break if they haven't but may show empty titles etc.

Note that I've dropped the project link for the time being because I'm using the project title to expand and collapse the project detail accordion.

cccs-ip commented 9 years ago

Thanks, Paul. It definitely is starting to shape up. Some immediate feedback:

The 'Employment Experience' section, for example, is different than what I was asking about, so I am still not sure if the sort of format I was requesting can be iterated in the way I was imagining. Also, we'll need to add in 'position' and to We also have no particular need to auto-count and present "Months Worked".

In its current arrangement, my preference would be for the following format:

Dates Employed Employer Position
Jan 2005 - Feb 2011 Cross-Cultural Consulting Services, PLLC. Director, Business Development & Research

PLEASE NOTE In the example above, I don't supply the actual days. At most, I would only like to supply months (people very often don't know the day they started a job).

With regard to the 'Projects' section, the main problem I see is how the database text is presented. My list of activities, for example, isn't breaking at all:

* facilitating project planning and reporting to meet IFC requirements * lead author of the Project Code of Conduct (CoC) * co-author of the Public Consultation and Disclosure Plan (PCDP) * coordinating editor and lead reviewer of the Cultural Heritage Screening Report * lead author of the Cultural Heritage Protection Plan (CHPP) * contributing author to the Community and Indigenous Peoples Development Plan * contributing author to the Land Acquisition and Resettlement Plan (LARAP)

Finally, there is no value in the 'references section', yet this field is still showing. You suggested it would be possible to hide headers and field areas if there was no content available?

I'll have a few more change requests soon.

cccs-ip commented 9 years ago

Another point that is somewhat unusual is how information is ordered. How is this logic determined?

In the CV backend, my education is listed oldest to most recent. This is the same for training. Yet it's presented completely differently in the CV section:

ordering of information

Can we enforce stacking orders? I would prefer the frontend to run opposite the database backend:* with most recent entries on top

pwhipp commented 9 years ago

The standard place to define the order is with the relevant model. I think most recent first is the best rule of thumb here. Using anything other than this standard ordering on admin will be a bit of a pain (and is probalby a bad idea).

I've made most recent first the sort for both the front and the back end.

cccs-ip commented 9 years ago

If you are making 'most recent first' in the backend, then please move that 'add project' field to show at the top so that projects stack beneath it. If you cannot do this, please make it so that most recent is on bottom in the admin, but on top for the front end.

cccs-ip commented 9 years ago

Please also note that this parallels my request (and my argument) given in issue #101 and #119.

cccs-ip commented 9 years ago

Please also note my other change requests above.

pwhipp commented 9 years ago

As discussed, the current system is good enough for now. I'm closing this as agreed.

cccs-ip commented 9 years ago

This issue relates to content showing in the CV HTML page. It refers not only the the database system, but also to the additional points raised above:

REMAINING COMPONENT 1

The 'Employment Experience' section, for example, is different than what I was asking about, so I am still not sure if the sort of format I was requesting can be iterated in the way I was imagining. Also, we'll need to add in 'position' and to We also have no particular need to auto-count and present "Months Worked".

In its current arrangement, my preference would be for the following format:

Dates Employed Employer Position
Jan 2005 - Feb 2011 Cross-Cultural Consulting Services, PLLC. Director, Business Development & Research

PLEASE NOTE In the example above, I don't supply the actual days. At most, I would only like to supply months (people very often don't know the day they started a job).

With regard to the 'Projects' section, the main problem I see is how the database text is presented. My list of activities, for example, isn't breaking at all:

REMAINING COMPONENT 2

With regard to the 'Projects' section, the main problem I see is how the database text is presented. My list of activities, for example, isn't breaking at all:

* facilitating project planning and reporting to meet IFC requirements * lead author of the Project Code of Conduct (CoC) * co-author of the Public Consultation and Disclosure Plan (PCDP) * coordinating editor and lead reviewer of the Cultural Heritage Screening Report * lead author of the Cultural Heritage Protection Plan (CHPP) * contributing author to the Community and Indigenous Peoples Development Plan * contributing author to the Land Acquisition and Resettlement Plan (LARAP)

cccs-ip commented 9 years ago

Component 1 moved to #138 . Component 2 moved to #137 .